History: Sample Buttons
Source of version: 9 (current)
Copy to clipboard
{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|~~#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} http://charliepark.org/bootstrap_buttons/ http://bootsnipp.com/buttons