Buttons

Buttons can be created by adding .btn class to a link or button element. By it's self the .btn class does not do much besides create some basic structure. To apply styles to the button we need to add an extender class like .btn-default or .btn-primary

Links as Buttons

Buttons as Buttons

Links as Buttons

    .btn
    .btn .btn-default
    .btn .btn-primary
    .btn .btn-highlight
    .btn .btn-secondary
    .btn .btn-standout

Buttons as Buttons

    .btn
    .btn .btn-default
    .btn .btn-primary
    .btn .btn-highlight
    .btn .btn-secondary
    .btn .btn-standout

For webmasters needing to add application behavior there are a few additional classes that might be useful. .active will make buttons appear pressed.

Links as Active Buttons

Buttons as Active Buttons

Links as Active Buttons
 

    .btn .btn-default .active
    .btn .btn-primary .active
    .btn .btn-highlight .active
    .btn .btn-secondary .active
    .btn .btn-standout .active

    
Buttons as Active Buttons

    .btn .btn-default .active
    .btn .btn-primary .active
    .btn .btn-highlight .active
    .btn .btn-secondary .active
    .btn .btn-standout .active

Add the .disabled class to make buttons appear unclickable by fading them back 50%. Add the disabled="disabled" attribute to <button> buttons instead of the class.

Links as Disabled Buttons

NOTE: This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links.

Buttons as Disabled Buttons

Links as Disabled Buttons
NOTE: This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links.

    .btn .btn-default .disabled
    .btn .btn-primary .disabled
    .btn .btn-highlight .disabled
    .btn .btn-secondary .disabled
    .btn .btn-standout .disabled

    
Buttons as Disabled Buttons

    
NOTE: If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a not so pretty text-shadow that cannot be fixed.
    .btn .btn-default
    .btn .btn-primary
    .btn .btn-highlight
    .btn .btn-secondary
    .btn .btn-standout

Other Button Variations

Outline buttons:

Use .btn-outline-light for outline button on dark backgrounds. Use .rounded-0 class to remove rounded corners.

Add a class .rounded-50 to make pill buttons.

Outline buttons:

    .btn-outline-primary
    .btn-outline-highlight
    .btn-outline-standout
    .btn-outline-secondary

Use .btn-outline-light for outline button on dark backgrounds. Use .rounded-0 class to remove rounded corners.

    

        

            

                .btn-outline-light
                .btn-light .rounded-0
            
        
    


Add a class .rounded-50 to make pill buttons.

    .btn-outline-primary
    .btn-outline-highlight
    .btn-outline-standout
    .btn-outline-secondary

Hover Effects

Add a class .btn-hover to add shutter out horisontal hover effect.

    .btn-primary
    .btn-highlight
    .btn-standout
    .btn-secondary
    .btn-default


    .btn-outline-primary
    .btn-outline-highlight
    .btn-outline-standout
    .btn-outline-secondary


    

        

            

                .btn-outline-light
                .btn-light
            
        
    

Add classes .btn-next, .btn-prev to add previous and next icons hover effect. Also button's content needs to be inclosed in the span tag.

    .btn-next
    .btn-prev

Sizes

    .btn-lg
    default size
    .btn-sm
    .btn-xs