Disable Preloader

### Buttons

#### Buttons Default

Button Button Button Button Button

Button Button Button Button Button

Button Button Button Button Button

    <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)

Button Button Button Button Button

Button Button Button Button Button

Button Button Button Button Button

    <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

Button Button Button Button Button

Button Button Button Button Button

Button Button Button Button Button

    <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)

Button Button Button Button Button

Button Button Button Button Button

Button Button Button Button Button

    <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

Button Button Button Button Button

Button Button Button Button Button

Button Button Button Button Button

    <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)

Button Button Button Button Button

Button Button Button Button Button

Button Button Button Button Button

    <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

Button Button Button Button Button

Button Button Button Button Button

Button Button Button Button Button

    <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)

Button Button Button Button Button

Button Button Button Button Button

Button Button Button Button Button

    <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

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

    <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

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

    <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

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

Button Button Button Button

    <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>

### Buttons on colored bacground

Button Button Button

Button Button Button

Button Button Button

Button Button Button

Button Button Button

Button Button Button

Button Button Button

Button Button Button

### Buttons on Image

Button Button Button

Button Button Button

Button Button Button

Button Button Button

Button Button Button

Button Button Button

Button Button Button

Button Button Button

    <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.