Студия EXNOVA, салон Baxter Shop. Дизайн-проектирование интерьеров, поставки из Италии от лучших брендов. салон итальянской мебели киев, салон итальянской мебели
38 044 253-45-79


38 044 459-02-46
Navigation

Buttons

ButtonTypeDescription
Standard gray button with gradient
primary Provides extra visual weight and identifies the primary action in a set of buttons
info Used as an alternative to the default styles
success Indicates a successful or positive action
warning Indicates caution should be taken with this action
danger Indicates a dangerous or potentially negative action
inverse Alternate dark gray button, not tied to a semantic action or use

Get the code

[button]Default[/button]
[button type="primary"]Primary[/button]
[button type="info"]Info[/button]
[button type="success"]Success[/button]
[button type="warning"]Warning[/button]
[button type="danger"]Danger[/button]
[button type="inverse"]Inverse[/button]


Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

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.

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.

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.


Disabled state

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

Primary link Link

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

One class, multiple tags

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

Link
<a class="btn" href="/">Link</a>
<button class="btn" type="submit">
  Button
</button>
<input class="btn" type="button"
         value="Input">
<input class="btn" type="submit"
         value="Submit">

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