History: Sample Buttons

• «
• »

            {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
||((HomePage|~~#FFF,#9CF:Wiki Link~~))|[#|~~#FFF,#CFCFCF:Anchor  Link~~]|[https://duckduckgo.com|External Search Link]
[B1]|[B2]|[B3]||

!!! In Fancy Table
{FANCYTABLE()}[#|A1]|[#|~~#FFF,#F60:A2~~]|[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}
---
[#|~~#FFF,#CFCFCF:A3%%%Second Line of Text~~]
@@@
[#|~~#FFF,#188f59:B1~~]
---
[#|~~#FFF,#F60:B2~~]
---
{DIV(class="white bgdarkgreen")}[#|B3]{DIV}
{SPLIT}
{DIV}