Loading...
 
Skip to main content

History: Sample Buttons

Source of version: 10 (current)

Copy to clipboard
            {syntax type="markdown"  editor="wysiwyg"} {HTML()}<style>
.flatbutton a, .flatbtns table a > span, .flatbtns div > a, .flatbtns td > a {
	display: block;
	line-height: 2em;
	padding: 1em;
	text-align: center;
	text-decoration: none;
}
.flatbtns td > a {
	padding: 0;
}
.flatbutton a {
	background-color: inherit;
}
.flatbutton a:hover, .flatbtns table a:hover, .flatbtns table a:hover > span {
	color: inherit;
	box-shadow: 0 2em 3em -2em rgba(0,0,0,.15) inset;
}
.flatbutton a:active, .flatbtns table a:active, .flatbtns table a:active > span {
	box-shadow: 0 3px 5px rgba(0, 0, 0, .125) inset;
	outline: none;
}
</style>{HTML}

{HTML()}<style>
.bggreen {
	background-color: #6C6;
	}
.bgdarkgreen	{
	background-color: #188f59;
	}
.white a,
.white {
	color: #fff !important;
	}
</style>{HTML}

## Simple Bootstrap-like Button

{button href="#" _text="Button Label"}

## Custom Flat Button


{DIV()} 
 
{DIV(class="flatbutton bgdarkgreen white")}[#|Button]{DIV}



 
{DIV(class="flatbutton bgdarkgreen white" width="50%")}[#|Button]{DIV}


 
{DIV(class="flatbutton bgdarkgreen white" width="25%")}[#|Button]{DIV}
 

{DIV}

{DIV(class="flatbtns")}

## Flat Button Links in Grid (Table)

### In Simple Table Syntax

| ((Sample Buttons | {HTML()}<span style="color:#FFF,#9CF">Wiki Link</span>{HTML})) | [# | {HTML()}<span style="color:#FFF,#CFCFCF">Anchor  Link</span>{HTML}] | [https://duckduckgo.com | External Search Link] |
|---|---|---|---|---|---|
| [B1] | [B2] | [B3] |

### In Fancy Table

{FANCYTABLE()}[#|A1]|[#|{HTML()}<span style="color:#FFF,#F60">A2</span>{HTML}]|[A3] 

{DIV(class="white bggreen")}[B1]{DIV}

|{DIV(class="flatbutton")}[B2]{DIV}|[B3]{FANCYTABLE}

### Split Plugin With Custom Color Button Links

{SPLIT(fixedsize="y")} 
[#|A1.1] 
[#|A1.2] 
[#|A1.3] 
--- 

{DIV(class="white bggreen")}[A2%%%Second Line of Text]{DIV}
 
--- 
[#|{HTML()}<span style="color:#FFF,#CFCFCF">A3%%%Second Line of Text</span>{HTML}] 
@@@ 
[#|{HTML()}<span style="color:#FFF,#188f59">B1</span>{HTML}] 
--- 
[#|{HTML()}<span style="color:#FFF,#F60">B2</span>{HTML}] 
--- 

{DIV(class="white bgdarkgreen")}[#|B3]{DIV}
 
{SPLIT} 
{DIV}

http://charliepark.org/bootstrap_buttons/ 
http://bootsnipp.com/buttons