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