-
Created: Monday, 25 March 2013
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 |
|---|---|---|---|
| Default | pencil |
Standard gray button with gradient | |
| Primary | primary |
comment |
Provides extra visual weight and identifies the primary action in a set of buttons |
| Info | info |
info-sign |
Used as an alternative to the default styles |
| Success | success |
ok |
Indicates a successful or positive action |
| Warning | warning |
warning-sign |
Indicates caution should be taken with this action |
| Danger | danger |
refresh |
Indicates a dangerous or potentially negative action |
| Inverse | inverse |
trash |
Alternate dark gray button, not tied to a semantic action or use |
| Link | link |
twitter |
Deemphasize a button by making it look like a link while maintaining button behavior |
| Download | 3d |
download |
Multi-colored 3D buttons with normal, hover and active states. |
| Download | 3d blue |
download |
|
| Download | 3d green |
download |
|
| Download | 3d red |
download |
|
| Download | 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"] 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]
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"] Primary button [/button] [button size="large" state="disabled"] Button [/button]
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)