{"id":140,"date":"2013-02-23T00:39:01","date_gmt":"2013-02-22T22:39:01","guid":{"rendered":"http:\/\/127.0.0.1:8097\/?p=140"},"modified":"2013-02-23T00:39:01","modified_gmt":"2013-02-22T22:39:01","slug":"button","status":"publish","type":"post","link":"https:\/\/logosplus.ifrbph.md\/?p=140","title":{"rendered":"Button"},"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\n\n\n\n\n\n
Button<\/th>\nType<\/th>\nIcon<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Default<\/a><\/td>\n<\/td>\npencil<\/code><\/td>\nStandard gray button with gradient<\/td>\n<\/tr>\n
Primary<\/a><\/td>\nprimary<\/code><\/td>\ncomment<\/code><\/td>\nProvides extra visual weight and identifies the primary action in a set of buttons<\/td>\n<\/tr>\n
Info<\/a><\/td>\ninfo<\/code><\/td>\ninfo-sign<\/code><\/td>\nUsed as an alternative to the default styles<\/td>\n<\/tr>\n
Success<\/a><\/td>\nsuccess<\/code><\/td>\nok<\/code><\/td>\nIndicates a successful or positive action<\/td>\n<\/tr>\n
Warning<\/a><\/td>\nwarning<\/code><\/td>\nwarning-sign<\/code><\/td>\nIndicates caution should be taken with this action<\/td>\n<\/tr>\n
Danger<\/a><\/td>\ndanger<\/code><\/td>\nrefresh<\/code><\/td>\nIndicates a dangerous or potentially negative action<\/td>\n<\/tr>\n
Inverse<\/a><\/td>\ninverse<\/code><\/td>\ntrash<\/code><\/td>\nAlternate dark gray button, not tied to a semantic action or use<\/td>\n<\/tr>\n
Link<\/a><\/td>\nlink<\/code><\/td>\ntwitter<\/code><\/td>\nDeemphasize a button by making it look like a link while maintaining button behavior<\/td>\n<\/tr>\n
Download<\/a><\/td>\n3d<\/code><\/td>\ndownload<\/code><\/td>\nMulti-colored 3D buttons with normal, hover and active states.<\/td>\n<\/tr>\n
Download<\/a><\/td>\n3d blue<\/code><\/td>\ndownload<\/code><\/td>\n<\/td>\n<\/tr>\n
Download<\/a><\/td>\n3d green<\/code><\/td>\ndownload<\/code><\/td>\n<\/td>\n<\/tr>\n
Download<\/a><\/td>\n3d red<\/code><\/td>\ndownload<\/code><\/td>\n<\/td>\n<\/tr>\n
Download<\/a><\/td>\n3d black<\/code><\/td>\ndownload<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\r\n[button ] Default icon=\"pencil\"[\/button]\r\n[button type=\"primary\" icon=\"comment\"] Primary [\/button]   \r\n[button type=\"info\" icon=\"sign\"] Info [\/button]   \r\n[button type=\"success\" icon=\"ok\"] Success [\/button]   \r\n[button type=\"warning\" icon=\"sign\"] warning [\/button]   \r\n[button type=\"danger\" icon=\"refresh\"] Danger [\/button]   \r\n[button type=\"inverse\" icon=\"trash\"] Inverse [\/button]   \r\n[button type=\"link\" icon=\"twitter\"] Link [\/button]\r\n\r\n[button type=\"3d\"       icon=\"download-alt\"] Link [\/button]\r\n[button type=\"3d blue\"  icon=\"download-alt\"] Link [\/button]\r\n[button type=\"3d green\" icon=\"download-alt\"] Link [\/button]\r\n[button type=\"3d red\"   icon=\"download-alt\"] Link [\/button]\r\n[button type=\"3d black\" icon=\"download-alt\"] Link [\/button]\r\n<\/pre>\n
You can find the more icon of usage at Font Awesome – Font Awesome – http:\/\/fortawesome.github.com\/Font-Awesome<\/a><\/p>\n
<\/p>\n
Cross browser compatibility<\/h2>\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
Button sizes<\/h2>\n
Fancy larger or smaller buttons? Add size= large<\/code>, small<\/code>, or mini<\/code> for additional sizes.<\/p>\n
\n
\n     Large button<\/a>
\n     Large button<\/a><\/p>\n
\n     Default button<\/a>
\n     Default button<\/a><\/p>\n
\n     Small button<\/a>
\n     Small button<\/a><\/p>\n
\n     Mini button<\/a>
\n     Mini button<\/a>\n<\/p>\n<\/div>\n
[button type=\"primary\" size=\"large\"] Large button [\/button]\r\n[button size=\"large\"] Large button [\/button]\r\n\r\n[button type=\"primary\"] Default button [\/button]\r\n[button] Default button [\/button]\r\n\r\n[button type=\"primary\" size=\"small\"] Small button [\/button]\r\n[button size=\"small\"] Large Small [\/button]\r\n\r\n[button type=\"primary\" size=\"mini\"] Mini button [\/button]\r\n[button size=\"mini\"] Mini button [\/button]\r\n<\/pre>\n
<\/p>\n
Create block level buttons\u2014those that span the full width of a parent\u2014 by adding .btn-block.<\/p>\n
\n
\n           Block level button<\/a>
\n           Block level button<\/a>\n     <\/div>\n<\/div>\n
[button type=\"primary\" size=\"large\" full=\"block\"] Block level button [\/button]\r\n[button size=\"large\" full=\"block\"] Block level button [\/button]\r\n<\/pre>\n
<\/p>\n
Disabled state<\/h2>\n
For disabled buttons, add the state=disabled<\/code> class to links and the disabled<\/code> attribute for <button><\/code> elements.<\/p>\n
\n     Primary button<\/span>
\n     Button<\/span>\n<\/div>\n
[button type=\"primary\" size=\"large\" state=\"disabled\"] Primary button [\/button]\r\n[button size=\"large\" state=\"disabled\"] Button [\/button]\r\n<\/pre>\n
<\/div>\n
<\/p>\n
Customization Options \/ Features<\/h4>\n