Who's Online

We have 884 guests and 8 members online

  • MypeJize
  • scelarunenponmi
  • sesprasoliciser
  • grafurmapa1985
  • Onlinepgreve
  • toisabacuc1984
  • monrin

Buttons

Sep 05, 2012 Written by 
Buttonclass=""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

Get the code

<button class="btn">Default</button><button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-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.

HomeShortCodesButtons Top of Page

Lastest News

  • Selena gomez
    Selena gomez Etiam mi dui, condimentum a semper nec, interdum ut orci.… Written on Friday, 24 August 2012 07:33 Read more...
  • The Rite
    The Rite Donec dignissim ipsum eu nisi egestas gravida. Maecenas non enim… Written on Friday, 24 August 2012 07:33 Read more...
  • Panigale gorgeous ducati
    Panigale gorgeous ducati Donec bibendum semper laoreet. Duis fringilla, ligula eu tincidunt lobortis,… Written on Friday, 24 August 2012 07:31 Read more...

Lastest Media

Zo2 Framework Settings

Select one of sample color schemes

Google Font

Menu Font
Body Font
Heading Font

Body

Background Color
Text Color
Link Color
Background Image

Top Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Header Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Mainmenu Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Slider Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Scroller Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Mainframe Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Bottom Scroller Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Breadcrumb Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Bottom Menu Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Bottom Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image
Background Color
Modules Title
Text Color
Link Color
Background Image