{"id":36,"date":"2013-03-21T12:09:01","date_gmt":"2013-03-21T08:39:01","guid":{"rendered":"http:\/\/paiwar-alarm.com\/new\/2013\/03\/21\/button-designs\/"},"modified":"2013-03-21T12:09:01","modified_gmt":"2013-03-21T08:39:01","slug":"button-designs","status":"publish","type":"post","link":"http:\/\/paiwar-alarm.com\/en\/?p=36","title":{"rendered":"Button Designs"},"content":{"rendered":"

Default buttons<\/h2>\n

Button styles can be applied to anything with the .btn<\/code> class applied. However, typically you’ll want to apply these to only <a><\/code> and <button><\/code> elements for the best rendering.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Button<\/th>\nclass=””<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
btn<\/code><\/td>\nStandard gray button with gradient<\/td>\n<\/tr>\n
btn btn-primary<\/code><\/td>\nProvides extra visual weight and identifies the primary action in a set of buttons<\/td>\n<\/tr>\n
btn btn-info<\/code><\/td>\nUsed as an alternative to the default styles<\/td>\n<\/tr>\n
btn btn-success<\/code><\/td>\nIndicates a successful or positive action<\/td>\n<\/tr>\n
btn btn-warning<\/code><\/td>\nIndicates caution should be taken with this action<\/td>\n<\/tr>\n
btn btn-danger<\/code><\/td>\nIndicates a dangerous or potentially negative action<\/td>\n<\/tr>\n
btn btn-inverse<\/code><\/td>\nAlternate dark gray button, not tied to a semantic action or use<\/td>\n<\/tr>\n
btn btn-link<\/code><\/td>\nDeemphasize a button by making it look like a link while maintaining button behavior<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Cross browser compatibility<\/h4>\n

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button<\/code> elements, rendering text gray with a nasty text-shadow that we cannot fix.<\/p>\n

BUTTONS SHORTCODES<\/h2>\n

[show_shortcode][btn size=”” type=”” class=”” class=”” disabled=”” link=”” target=”” icon=”” icontheme=””][\/btn][\/show_shortcode]<\/p>\n

\n

type:<\/strong> primary \/ info \/ success \/ warning \/ danger \/ inverse \/ link \/ flat<\/p>\n

size:<\/strong> primary \/ large \/ small \/ mini<\/p>\n

disabled:<\/strong> yes \/ no<\/p>\n

icon:<\/strong> add the icon type without the ” icon- “<\/p>\n

icontheme:<\/strong> white \/ black<\/p>\n<\/div>\n

[show_shortcode][btn size=\"\" type=\"\" class=\"\" class=\"\" disabled=\"\" link=\"\" target=\"\" icon=\"\" icontheme=\"\"][\/btn][\/show_shortcode]<\/pre>\n
Button sizes<\/h2>\n
Fancy larger or smaller buttons? Add .btn-large<\/code>, .btn-small<\/code>, or .btn-mini<\/code> for additional sizes.<\/p>\n
\n