Buttons

Buttons Default


<a href="#" class="btn btn-default btn-xl">Read More</a>
<a href="#" class="btn btn-default btn-lg">Read More</a>
<a href="#" class="btn btn-default">Read More</a>
<a href="#" class="btn btn-default btn-sm">Read More</a>
<a href="#" class="btn btn-default btn-xs">Read More</a>


<a href="#" class="btn btn-default btn-circled btn-xl">Read More</a>
<a href="#" class="btn btn-default btn-circled btn-lg">Read More</a>
<a href="#" class="btn btn-default btn-circled">Read More</a>
<a href="#" class="btn btn-default btn-circled btn-sm">Read More</a>
<a href="#" class="btn btn-default btn-circled btn-xs">Read More</a>


<a href="#" class="btn btn-default btn-flat btn-xl">Read More</a>
<a href="#" class="btn btn-default btn-flat btn-lg">Read More</a>
<a href="#" class="btn btn-default btn-flat">Read More</a>
<a href="#" class="btn btn-default btn-flat btn-sm">Read More</a>
<a href="#" class="btn btn-default btn-flat btn-xs">Read More</a>


Buttons Default (Theme Colored)


<a href="#" class="btn btn-default btn-theme-colored btn-xl">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-lg">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-sm">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-xs">Read More</a>


<a href="#" class="btn btn-default btn-theme-colored btn-circled btn-xl">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-circled btn-lg">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-circled">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-circled btn-sm">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-circled btn-xs">Read More</a>


<a href="#" class="btn btn-default btn-theme-colored btn-flat btn-xl">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-flat btn-lg">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-flat">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-flat btn-sm">Read More</a>
<a href="#" class="btn btn-default btn-theme-colored btn-flat btn-xs">Read More</a>


Buttons Border


<a href="#" class="btn btn-border btn-xl">Read More</a>
<a href="#" class="btn btn-border btn-lg">Read More</a>
<a href="#" class="btn btn-border">Read More</a>
<a href="#" class="btn btn-border btn-sm">Read More</a>
<a href="#" class="btn btn-border btn-xs">Read More</a>


<a href="#" class="btn btn-border btn-circled btn-xl">Read More</a>
<a href="#" class="btn btn-border btn-circled btn-lg">Read More</a>
<a href="#" class="btn btn-border btn-circled">Read More</a>
<a href="#" class="btn btn-border btn-circled btn-sm">Read More</a>
<a href="#" class="btn btn-border btn-circled btn-xs">Read More</a>


<a href="#" class="btn btn-border btn-flat btn-xl">Read More</a>
<a href="#" class="btn btn-border btn-flat btn-lg">Read More</a>
<a href="#" class="btn btn-border btn-flat">Read More</a>
<a href="#" class="btn btn-border btn-flat btn-sm">Read More</a>
<a href="#" class="btn btn-border btn-flat btn-xs">Read More</a>


Buttons Border (Theme Colored)


<a href="#" class="btn btn-border btn-theme-colored btn-xl">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-lg">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-sm">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-xs">Read More</a>


<a href="#" class="btn btn-border btn-theme-colored btn-circled btn-xl">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-circled btn-lg">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-circled">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-circled btn-sm">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-circled btn-xs">Read More</a>


<a href="#" class="btn btn-border btn-theme-colored btn-flat btn-xl">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-flat btn-lg">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-flat">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-flat btn-sm">Read More</a>
<a href="#" class="btn btn-border btn-theme-colored btn-flat btn-xs">Read More</a>


Buttons Dark


<a href="#" class="btn btn-dark btn-xl">Read More</a>
<a href="#" class="btn btn-dark btn-lg">Read More</a>
<a href="#" class="btn btn-dark">Read More</a>
<a href="#" class="btn btn-dark btn-sm">Read More</a>
<a href="#" class="btn btn-dark btn-xs">Read More</a>


<a href="#" class="btn btn-dark btn-circled btn-xl">Read More</a>
<a href="#" class="btn btn-dark btn-circled btn-lg">Read More</a>
<a href="#" class="btn btn-dark btn-circled">Read More</a>
<a href="#" class="btn btn-dark btn-circled btn-sm">Read More</a>
<a href="#" class="btn btn-dark btn-circled btn-xs">Read More</a>


<a href="#" class="btn btn-dark btn-flat btn-xl">Read More</a>
<a href="#" class="btn btn-dark btn-flat btn-lg">Read More</a>
<a href="#" class="btn btn-dark btn-flat">Read More</a>
<a href="#" class="btn btn-dark btn-flat btn-sm">Read More</a>
<a href="#" class="btn btn-dark btn-flat btn-xs">Read More</a>


Buttons Dark (Theme Colored)


<a href="#" class="btn btn-dark btn-theme-colored btn-xl">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-lg">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-sm">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-xs">Read More</a>


<a href="#" class="btn btn-dark btn-theme-colored btn-circled btn-xl">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-circled btn-lg">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-circled">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-circled btn-sm">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-circled btn-xs">Read More</a>


<a href="#" class="btn btn-dark btn-theme-colored btn-flat btn-xl">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-flat btn-lg">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-flat">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-flat btn-sm">Read More</a>
<a href="#" class="btn btn-dark btn-theme-colored btn-flat btn-xs">Read More</a>


Buttons Gray


<a href="#" class="btn btn-gray btn-xl">Read More</a>
<a href="#" class="btn btn-gray btn-lg">Read More</a>
<a href="#" class="btn btn-gray">Read More</a>
<a href="#" class="btn btn-gray btn-sm">Read More</a>
<a href="#" class="btn btn-gray btn-xs">Read More</a>


<a href="#" class="btn btn-gray btn-circled btn-xl">Read More</a>
<a href="#" class="btn btn-gray btn-circled btn-lg">Read More</a>
<a href="#" class="btn btn-gray btn-circled">Read More</a>
<a href="#" class="btn btn-gray btn-circled btn-sm">Read More</a>
<a href="#" class="btn btn-gray btn-circled btn-xs">Read More</a>


<a href="#" class="btn btn-gray btn-flat btn-xl">Read More</a>
<a href="#" class="btn btn-gray btn-flat btn-lg">Read More</a>
<a href="#" class="btn btn-gray btn-flat">Read More</a>
<a href="#" class="btn btn-gray btn-flat btn-sm">Read More</a>
<a href="#" class="btn btn-gray btn-flat btn-xs">Read More</a>


Buttons Gray (Theme Colored)


<a href="#" class="btn btn-gray btn-theme-colored btn-xl">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-lg">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-sm">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-xs">Read More</a>


<a href="#" class="btn btn-gray btn-theme-colored btn-circled btn-xl">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-circled btn-lg">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-circled">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-circled btn-sm">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-circled btn-xs">Read More</a>


<a href="#" class="btn btn-gray btn-theme-colored btn-flat btn-xl">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-flat btn-lg">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-flat">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-flat btn-sm">Read More</a>
<a href="#" class="btn btn-gray btn-theme-colored btn-flat btn-xs">Read More</a>


Buttons with Icon



<a href="#" class="btn btn-default"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-default btn-theme-colored"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-border"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-border btn-theme-colored"><i class="fa fa-home"></i> Button</a> 
<a href="#" class="btn btn-dark"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-dark btn-theme-colored"><i class="fa fa-home"></i> Button</a> 
<a href="#" class="btn btn-gray"><i class="fa fa-home"></i> Button</a> 
<a href="#" class="btn btn-gray btn-theme-colored"><i class="fa fa-home"></i> Button</a>


<a href="#" class="btn btn-default">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-default btn-theme-colored">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-border">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-border btn-theme-colored">Button <i class="fa fa-arrow-circle-right"></i></a> 
<a href="#" class="btn btn-dark">Button <i class="fa fa-arrow-circle-right"></i></a> 
<a href="#" class="btn btn-dark btn-theme-colored">Button <i class="fa fa-arrow-circle-right"></i></a> 
<a href="#" class="btn btn-gray">Button <i class="fa fa-arrow-circle-right"></i></a>  
<a href="#" class="btn btn-gray btn-theme-colored">Button <i class="fa fa-arrow-circle-right"></i></a>      

Buttons with Tooltip



<a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Button</a>
<a class="btn btn-dark" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Button</a>
<a class="btn btn-dark btn-theme-colored" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Button</a>
<a class="btn btn-gray" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Button</a>
<a class="btn btn-gray btn-theme-colored" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Button</a>


<a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="fa fa-home"></i> Button</a>
<a class="btn btn-dark" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="fa fa-home"></i> Button</a>
<a class="btn btn-dark btn-theme-colored" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="fa fa-home"></i> Button</a>
<a class="btn btn-gray" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="fa fa-home"></i> Button</a>
<a class="btn btn-gray btn-theme-colored" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><i class="fa fa-home"></i> Button</a>

Buttons with Icon on bacground color



<a href="#" class="btn btn-default btn-transparent"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-default btn-transparent btn-theme-colored"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-border btn-transparent"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-border btn-transparent btn-theme-colored"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-dark btn-transparent"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-dark btn-transparent btn-theme-colored"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-gray btn-transparent"><i class="fa fa-home"></i> Button</a>
<a href="#" class="btn btn-gray btn-transparent btn-theme-colored"><i class="fa fa-home"></i> Button</a>

<a href="#" class="btn btn-default btn-transparent">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-default btn-transparent btn-theme-colored">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-border btn-transparent">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-border btn-transparent btn-theme-colored">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-dark btn-transparent">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-dark btn-transparent btn-theme-colored">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-gray btn-transparent">Button <i class="fa fa-arrow-circle-right"></i></a>
<a href="#" class="btn btn-gray btn-transparent btn-theme-colored">Button <i class="fa fa-arrow-circle-right"></i></a>


<a class="btn btn-default btn-transparent btn-flat btn-lg" href="#">Button</a>
<a class="btn btn-default btn-transparent btn-theme-colored btn-flat btn-" href="#">Button</a>
<a class="btn btn-border btn-transparent btn-flat btn-lg" href="#">Button</a>
<a class="btn btn-border btn-transparent btn-theme-colored btn-flat btn-lg" href="#">Button</a>

<a class="btn btn-dark btn-transparent btn-circled btn-lg" href="#">Button</a>
<a class="btn btn-dark btn-transparent btn-theme-colored btn-circled btn-lg" href="#">Button</a>
<a class="btn btn-gray btn-transparent btn-circled btn-lg" href="#">Button</a>
<a class="btn btn-gray btn-transparent btn-theme-colored btn-circled btn-lg" href="#">Button</a>

Bootstrap Buttons

Button tags

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

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


Options

Use any of the available button classes to quickly create a styled button.


    <!-- Standard button -->
    <button type="button" class="btn btn-default">Default</button>

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">Primary</button>

    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">Success</button>

    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">Info</button>

    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">Warning</button>

    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">Danger</button>

    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">Link</button>
    
    

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.


    <p>
      <button type="button" class="btn btn-primary btn-lg">Large button</button>
      <button type="button" class="btn btn-default btn-lg">Large button</button>
    </p>
    <p>
      <button type="button" class="btn btn-dark btn-flat">Default button</button>
      <button type="button" class="btn btn-default">Default button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-sm">Small button</button>
      <button type="button" class="btn btn-default btn-sm">Small button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
      <button type="button" class="btn btn-default btn-xs">Extra small button</button>
    </p>
    
    

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

    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
    
    

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.


Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

    <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
    <button type="button" class="btn btn-default btn-lg active">Button</button>
    
    

Anchor element

Add the .active class to <a> buttons.

Primary link Link

    <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
    
    

Disabled state

Make buttons look unclickable by fading them back with opacity.


Button element

Add the disabled attribute to <button> buttons.

    <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
    
    

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

    <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
    <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
    
    

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