Button

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

Button Type Icon Description
[button icon=”pencil”]Default[/button] pencil Standard gray button with gradient
[button type=”primary” icon=”comment”]Primary[/button] primary comment Provides extra visual weight and identifies the primary action in a set of buttons
[button type=”info” icon=”info-sign”]Info[/button] info info-sign Used as an alternative to the default styles
[button type=”success” icon=”ok”]Success[/button] success ok Indicates a successful or positive action
[button type=”warning” icon=”warning-sign”]Warning[/button] warning warning-sign Indicates caution should be taken with this action
[button type=”danger” icon=”refresh”]Danger[/button] danger refresh Indicates a dangerous or potentially negative action
[button type=”inverse” icon=”trash”]Inverse[/button] inverse trash Alternate dark gray button, not tied to a semantic action or use
[button type=”link” icon=”twitter”]Link[/button] link twitter Deemphasize a button by making it look like a link while maintaining button behavior
[button type=”3d” icon=”download-alt”]Download[/button] 3d download Multi-colored 3D buttons with normal, hover and active states.
[button type=”3d blue” icon=”download-alt”]Download[/button] 3d blue download
[button type=”3d green” icon=”download-alt”]Download[/button] 3d green download
[button type=”3d red” icon=”download-alt”]Download[/button] 3d red download
[button type=”3d black” icon=”download-alt”]Download[/button] 3d black download 
[button ] Default icon="pencil"[/button]
[button type="primary" icon="comment"] Primary [/button]   
[button type="info" icon="sign"] Info [/button]   
[button type="success" icon="ok"] Success [/button]   
[button type="warning" icon="sign"] warning [/button]   
[button type="danger" icon="refresh"] Danger [/button]   
[button type="inverse" icon="trash"] Inverse [/button]   
[button type="link" icon="twitter"] Link [/button]

[button type="3d"       icon="download-alt"] Link [/button]
[button type="3d blue"  icon="download-alt"] Link [/button]
[button type="3d green" icon="download-alt"] Link [/button]
[button type="3d red"   icon="download-alt"] Link [/button]
[button type="3d black" icon="download-alt"] Link [/button]

You can find the more icon of usage at Font Awesome – Font Awesome – http://fortawesome.github.com/Font-Awesome

Cross browser compatibility

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

Button sizes

Fancy larger or smaller buttons? Add size= large, small, or mini for additional sizes.

[button type=”primary” size=”large”]Large button[/button]
[button size=”large”]Large button[/button]

[button type=”primary” ]Default button[/button]
[button ]Default button[/button]

[button type=”primary” size=”small”]Small button[/button]
[button size=”small”]Small button[/button]

[button type=”primary” size=”mini”]Mini button[/button]
[button size=”mini”]Mini button[/button] 

[button type="primary" size="large"] Large button [/button]
[button size="large"] Large button [/button]

[button type="primary"] Default button [/button]
[button] Default button [/button]

[button type="primary" size="small"] Small button [/button]
[button size="small"] Large Small [/button]

[button type="primary" size="mini"] Mini button [/button]
[button size="mini"] Mini button [/button]

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

[button type=”primary” size=”large” full=”block” ] Block level button[/button]
[button size=”large” full=”block”] Block level button[/button] 
[button type="primary" size="large" full="block"] Block level button [/button]
[button size="large" full="block"] Block level button [/button]

Disabled state

For disabled buttons, add the state=disabled class to links and the disabled attribute for <button> elements.

[button type=”primary” size=”large” state=”disabled” icon=”edit”]Primary button[/button]
[button size=”large” state=”disabled”]Button[/button] 
[button type="primary" size="large" state="disabled"] Primary button [/button]
[button size="large" state="disabled"] Button [/button]

[space height=”10″]

Customization Options / Features

  • type – selects type button ,available (primary, info, success, warning, danger, inverse, link, 3d)
  • icon – add any mini-icon (from the Icons section) here.
  • size – button size, available ( mini, small, default, large)
  • full – the full width of a parent
  • target – link target, ex. “_blank”
  • state – disabled buttons, available ( true, disabled)

Related Posts

Scroll to Top