Button - otkroem.com.ua

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	class=»»	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior

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 .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
<buttonclass=«btn btn-large btn-primary»type=«button»>Large button</button>
<buttonclass=«btn btn-large»type=«button»>Large button</button>
</p>
<p>
<buttonclass=«btn btn-primary»type=«button»>Default button</button>
<buttonclass=«btn»type=«button»>Default button</button>
</p>
<p>
<buttonclass=«btn btn-small btn-primary»type=«button»>Small button</button>
<buttonclass=«btn btn-small»type=«button»>Small button</button>
</p>
<p>
<buttonclass=«btn btn-mini btn-primary»type=«button»>Mini button</button>
<buttonclass=«btn btn-mini»type=«button»>Mini button</button>
</p>

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

<buttonclass=«btn btn-large btn-block btn-primary»type=«button»>Block level button</button>
<buttonclass=«btn btn-large btn-block»type=«button»>Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<ahref=«#»class=«btn btn-large btn-primary disabled»>Primary link</a>
<ahref=«#»class=«btn btn-large disabled»>Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

<buttontype=«button»class=«btn btn-large btn-primary disabled»disabled=«disabled»>Primary button</button>
<buttontype=«button»class=«btn btn-large»disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

<aclass=«btn»href=«»>Link</a>
<buttonclass=«btn»type=«submit»>Button</button>
<inputclass=«btn»type=«button»value=«Input»>
<inputclass=«btn»type=«submit»value=«Submit»>

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.