Buttons

Highly customizable production ready mobile web and desktop css buttons

Buttons shapes and sizes

<a href="#" class="button button-tiny">Kate</a>
<a href="#" class="button button-rounded button-tiny">Kate</a>
<a href="#" class="button button-pill button-tiny">Kate</a>
<button class="button button-square button-tiny"><i class="fa fa-briefcase"></i></button>
<button class="button button-box button-tiny"><i class="fa fa-briefcase"></i></button>
<button class="button button-circle button-tiny"><i class="fa fa-briefcase"></i></button>
<br>
<a href="#" class="button button-primary button-small">Kate</a>
<a href="#" class="button button-primary button-rounded button-small">Kate</a>
<a href="#" class="button button-primary button-pill button-small">Kate</a>
<button class="button button-primary button-square button-small"><i class="fa fa-briefcase"></i></button>
<button class="button button-primary button-box button-small"><i class="fa fa-briefcase"></i></button>
<button class="button button-primary button-circle button-small"><i class="fa fa-briefcase"></i></button>
<br>
<a href="#" class="button button-action">Kate</a>
<a href="#" class="button button-action button-rounded">Kate</a>
<a href="#" class="button button-action button-pill">Kate</a>
<button class="button button-action button-square"><i class="fa fa-briefcase"></i></button>
<button class="button button-action button-box"><i class="fa fa-briefcase"></i></button>
<button class="button button-action button-circle"><i class="fa fa-briefcase"></i></button>
<br>
<a href="#" class="button button-highlight button-large">Kate</a>
<a href="#" class="button button-highlight button-rounded button-large">Kate</a>
<a href="#" class="button button-highlight button-pill button-large">Kate</a>
<button class="button button-highlight button-square button-large"><i class="fa fa-briefcase"></i></button>
<button class="button button-highlight button-box button-large"><i class="fa fa-briefcase"></i></button>
<button class="button button-highlight button-circle button-large"><i class="fa fa-briefcase"></i></button>
<br>
<a href="#" class="button button-caution button-jumbo">Kate</a>
<a href="#" class="button button-caution button-rounded button-jumbo">Kate</a>
<a href="#" class="button button-caution button-pill button-jumbo">Kate</a>
<button class="button button-caution button-square button-jumbo"><i class="fa fa-briefcase"></i></button>
<button class="button button-caution button-box button-jumbo"><i class="fa fa-briefcase"></i></button>
<button class="button button-caution button-circle button-jumbo"><i class="fa fa-briefcase"></i></button>
<br>
<a href="#" class="button button-royal button-giant">Kate</a>
<a href="#" class="button button-royal button-rounded button-giant">Kate</a>
<a href="#" class="button button-royal button-pill button-giant">Kate</a>
<button class="button button-royal button-square button-giant"><i class="fa fa-briefcase"></i></button>
<button class="button button-royal button-box button-giant"><i class="fa fa-briefcase"></i></button>
<button class="button button-royal button-circle button-giant"><i class="fa fa-briefcase"></i></button>

Kate Kate Kate
Kate Kate Kate
Kate Kate Kate
Kate Kate Kate
Kate Kate Kate
Kate Kate Kate

Shrinked buttons

<a href="#" class="button button-tiny button-shrink">Kate</a>
<a href="#" class="button button-rounded button-tiny button-shrink">Kate</a>
<a href="#" class="button button-pill button-tiny button-shrink">Kate</a>
<br>
<a href="#" class="button button-primary button-small button-shrink">Kate</a>
<a href="#" class="button button-primary button-rounded button-small button-shrink">Kate</a>
<a href="#" class="button button-primary button-pill button-small button-shrink">Kate</a>
<br>
<a href="#" class="button button-action button-shrink">Kate</a>
<a href="#" class="button button-action button-rounded button-shrink">Kate</a>
<a href="#" class="button button-action button-pill button-shrink">Kate</a>
<br>
<a href="#" class="button button-highlight button-large button-shrink">Kate</a>
<a href="#" class="button button-highlight button-rounded button-large button-shrink">Kate</a>
<a href="#" class="button button-highlight button-pill button-large button-shrink">Kate</a>
<br>
<a href="#" class="button button-caution button-jumbo button-shrink">Kate</a>
<a href="#" class="button button-caution button-rounded button-jumbo button-shrink">Kate</a>
<a href="#" class="button button-caution button-pill button-jumbo button-shrink">Kate</a>
<br>
<a href="#" class="button button-royal button-giant button-shrink">Kate</a>
<a href="#" class="button button-royal button-rounded button-giant button-shrink">Kate</a>
<a href="#" class="button button-royal button-pill button-giant button-shrink">Kate</a>

Kate Kate Kate
Kate Kate Kate
Kate Kate Kate
Kate Kate Kate
Kate Kate Kate
Kate Kate Kate

Border / borderless buttons

<button class="button button-large button-plain button-border button-circle"><i class="fa fa-reply"></i></button>
<button class="button button-large button-plain button-border button-box"><i class="fa fa-star"></i></button>
<button class="button button-large button-plain button-border button-square"><i class="fa fa-trash-o"></i></button>
<button class="button button-large button-plain button-borderless"><i class="fa fa-tag"></i></button>

3D buttons

<button class="button button-3d button-box button-jumbo"><i class="fa fa-thumbs-up"></i></button>
<a href="#" class="button button-3d button-primary button-rounded">Check out the new site!</a>
<a href="#" class="button button-3d button-action button-pill">Visit Us!</a>
<button class="button button-3d button-action button-circle button-jumbo"><i class="fa fa-thumbs-up"></i></button>
<a href="#" class="button button-3d button-caution"><i class="fa fa-camera"></i> Kate</a>
<a href="#" class="button button-3d button-royal">Say Hi!</a>

Check out the new site! Visit Us! Kate Say Hi!

Filled buttons

<button class="button button-theme button-fill">Kate Template</button>
<button class="button button-theme button-fill button-fill-left">Kate Template</button>
<button class="button button-theme button-fill button-fill-bottom">Kate Template</button>
<button class="button button-theme button-fill button-fill-top">Kate Template</button>
<button class="button button-theme button-arrow">Kate Template</button>
<button class="button button-theme button-slide">
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</button>
<button class="button button-theme button-slide-alt">
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</button>

Raised buttons

<a href="#" class="button button-raised button-primary button-pill">Visit Us!</a>
<button class="button button-raised button-action button-circle button-jumbo"><i class="fa fa-thumbs-up"></i></button>
<a href="#" class="button button-raised button-caution"><i class="fa fa-camera"></i> Kate</a>
<a href="#" class="button button-raised button-royal">Say Hi!</a>
<a href="#" class="button button-raised button-pill button-inverse">Say Hi!</a>

Visit Us! Kate Say Hi! Say Hi!

Long shadows

<button class="button button-primary button-box button-giant button-longshadow-right">
  <i class="fa fa-twitter"></i>
</button>
<button class="button button-caution button-box button-raised button-giant button-longshadow">
  <i class="fa fa-google"></i>
</button>
<button class="button button-action button-box button-giant button-longshadow-left">
  <i class="fa fa-share-alt"></i>
</button>
<button class="button button-highlight button-box button-giant button-longshadow-right button-longshadow-expand">
  <i class="fa fa-rss"></i>
</button>
<button class="button button-primary button-circle button-giant button-longshadow">
  <i class="fa fa-gear"></i>
</button>

Glowing buttons

<a href="#" class="button button-glow button-rounded button-raised button-primary">Kate</a>
<a href="#" class="button button-glow button-border button-rounded button-primary">Kate</a>
<button class="button button-glow button-circle button-action button-jumbo"><i class="fa fa-thumbs-up"></i></button>
<a href="#" class="button button-glow button-rounded button-highlight">Kate</a>
<a href="#" class="button button-glow button-rounded button-caution">Kate</a>
<a href="#" class="button button-glow button-rounded button-royal">Kate</a>

Kate Kate Kate Kate Kate

Dropdown buttons

<div class="button-dropdown" data-buttons="dropdown">
  <button class="button button-rounded">
    Select Me <i class="fa fa-caret-down"></i>
  </button>

  <ul class="button-dropdown-list">
    <li><a href="#">Option Link 1</a></li>
    <li><a href="#">Option Link 2</a></li>
    <li class="button-dropdown-divider">
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</div>

<div class="button-dropdown button-dropdown-primary" data-buttons="dropdown">
  <button class="button button-primary button-large">
    <i class="fa fa-bars"></i> Select Me
  </button>

  <ul class="button-dropdown-list is-below">
    <li><a href="#"><i class="fa fa-heart-o"></i> Option Link 1</a></li>
    <li><a href="#">Option Link 2</a></li>
    <li class="button-dropdown-divider">
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</div>


<div class="button-dropdown button-dropdown-action" data-buttons="dropdown">
  <button class="button button-action">
    Select Me <i class="fa fa-caret-up"></i>
  </button>

  <ul class="button-dropdown-list is-above">
    <li><a href="#">Option Link 1</a></li>
    <li><a href="#">Option Link 2</a></li>
    <li class="button-dropdown-divider">
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</div>

<div class="button-dropdown button-dropdown-plain" data-buttons="dropdown">
  <button class="button button-caution button-pill">
    Select Me <i class="fa fa-caret-down"></i>
  </button>

  <ul class="button-dropdown-list">
    <li><a href="#">Option Link 1</a></li>
    <li class="button-dropdown-divider">
      <a href="#">Option Link 2</a>
    </li>
    <li>
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</div>

<div class="button-dropdown button-dropdown-inverse" data-buttons="dropdown">
  <a href="#" class="button button-inverse">
    <i class="fa fa-envelope"></i> Select Me <i class="fa fa-caret-down"></i>
  </a>

  <ul class="button-dropdown-list is-below">
    <li><a href="#">Option Link 1</a></li>
    <li class="button-dropdown-divider">
      <a href="#">Option Link 2</a>
    </li>
    <li>
      <a href="#">Option Link 3</a>
    </li>
  </ul>
</div>

Buttons groups

<div class="button-group">
  <button type="button" class="button button-primary">Option 1</button>
  <button type="button" class="button button-primary">Option 2</button>
  <button type="button" class="button button-primary">Option 3</button>

  <!-- DROPDOWN MENU -->
  <div class="button-dropdown button-dropdown-primary" data-buttons="dropdown">
    <a href="#" class="button button-primary"> Select Me <i class="fa fa-caret-down"></i></a>

    <ul class="button-dropdown-list is-below">
      <li><a href="#">Option Link 1</a></li>
      <li><a href="#">Option Link 2</a></li>
      <li class="button-dropdown-divider"><a href="#">Option Link 3</a></li>
    </ul>
  </div>
</div>
<br>
<div class="button-group">
  <button type="button" class="button button-royal button-rounded button-raised">Option 1</button>
  <button type="button" class="button button-royal button-rounded button-raised">Option 2</button>
  <button type="button" class="button button-royal button-rounded button-raised">Option 3</button>
</div>
<br>
<div class="button-group">
  <button type="button" class="button button-pill button-action">Option 1</button>
  <button type="button" class="button button-pill button-action">Option 2</button>
  <button type="button" class="button button-pill button-action">Option 3</button>
</div>

Stacked buttons

<a href="#" class="button button-block button-rounded button-large">Go</a>
<a href="#" class="button button-block button-rounded button-primary button-large">Go</a>
<a href="#" class="button button-block button-rounded button-action button-large">Go</a>
<a href="#" class="button button-block button-rounded button-highlight button-large">Go</a>
<a href="#" class="button button-block button-rounded button-caution button-large">Go</a>
<a href="#" class="button button-block button-rounded button-royal button-large">Go</a>

Go Go Go Go Go Go

Button wrappers

<span class="button-wrap">
  <button class="button button-circle">
    <i class="fa fa-cloud"></i>
  </button>
</span>

<span class="button-wrap">
  <button class="button button-circle button-raised button-primary">
    <i class="fa fa-cloud"></i>
  </button>
</span>

<span class="button-wrap">
  <a href="#" class="button button-pill ">Go</a>
</span>
<span class="button-wrap">
  <a href="#" class="button button-pill button-raised button-primary">Go</a>
</span>

Go Go

Form buttons

<input type="submit" value="Go" class="button button-pill button-primary">
<button class="button button-pill button-primary">Go</button>

<!-- DISABLED BUTTONS -->
<input disabled="" type="submit" value="Go" class="button button-pill button-primary">
<button disabled="" class="button  button-pill button-primary">Go</button>
<button disabled="" class="button button-pill button-flat-primary">Go</button>
<a href="#" class="button disabled button-pill button-primary ">Go</a>

Tyographic styles

<a href="#" class="button button-uppercase button-primary">uppercase</a>
<a href="#" class="button button-lowercase button-primary ">lowercase</a>
<a href="#" class="button button-capitalize button-primary">capitalize</a>
<a href="#" class="button button-small-caps button-primary">small caps</a>

uppercase lowercase capitalize small caps

Bootstrap buttons

Default

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Size

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

Stacked

<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

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

Primary link Link

Disabled state

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

Primary link Link

Button groups

<div class="row">
  <div class="col-sm-4">

    <p class="h5 m-t-md">Basic</p>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>

    <p class="h5 m-t-md">Button toolbar</p>
    <div class="btn-toolbar inline-block" role="toolbar">
      <div class="btn-group" role="group">
        <button class="btn btn-default" type="button">1</button>
        <button class="btn btn-default" type="button">2</button>
        <button class="btn btn-default" type="button">3</button>
        <button class="btn btn-default" type="button">4</button>
      </div>
      <div class="btn-group" role="group">
        <button class="btn btn-default" type="button">5</button>
        <button class="btn btn-default" type="button">6</button>
        <button class="btn btn-default" type="button">7</button>
      </div>
    </div>

    <p class="h5 m-t-md">Nesting</p>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

  </div>
  <div class="col-sm-4">

    <p class="h5 m-t-md">Size</p>
    <div class="btn-group btn-group-lg" role="group">
      <button class="btn btn-default" type="button">Left</button>
      <button class="btn btn-default" type="button">Middle</button>
      <button class="btn btn-default" type="button">Right</button>
    </div><br><br>
    <div class="btn-group" role="group">
      <button class="btn btn-default" type="button">Left</button>
      <button class="btn btn-default" type="button">Middle</button>
      <button class="btn btn-default" type="button">Right</button>
    </div><br><br>
    <div class="btn-group btn-group-sm" role="group">
      <button class="btn btn-default" type="button">Left</button>
      <button class="btn btn-default" type="button">Middle</button>
      <button class="btn btn-default" type="button">Right</button>
    </div><br><br>
    <div class="btn-group btn-group-xs" role="group">
      <button class="btn btn-default" type="button">Left</button>
      <button class="btn btn-default" type="button">Middle</button>
      <button class="btn btn-default" type="button">Right</button>
    </div>

  </div>

  <div class="col-sm-4">

    <p class="h5 m-t-md">Vertical variation</p>
    <div class="btn-group-vertical" role="group">
      <button class="btn btn-default" type="button">Button</button>
      <button class="btn btn-default" type="button">Button</button>
      <div class="btn-group" role="group">
        <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="btnGroupVerticalDrop1" type="button">Dropdown <span class="caret"></span></button>
        <ul aria-labelledby="btnGroupVerticalDrop1" class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <button class="btn btn-default" type="button">Button</button>
      <button class="btn btn-default" type="button">Button</button>
      <div class="btn-group" role="group">
        <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="btnGroupVerticalDrop2" type="button">Dropdown <span class="caret"></span></button>
        <ul aria-labelledby="btnGroupVerticalDrop2" class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group">
        <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="btnGroupVerticalDrop3" type="button">Dropdown <span class="caret"></span></button>
        <ul aria-labelledby="btnGroupVerticalDrop3" class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group">
        <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="btnGroupVerticalDrop4" type="button">Dropdown <span class="caret"></span></button>
        <ul aria-labelledby="btnGroupVerticalDrop4" class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

  </div>
  <div class="col-xs-12">

    <p class="h5 m-t-md">Justified</p>
    <div class="btn-group btn-group-justified" role="group">
      <a class="btn btn-default" href="#" role="button">Left</a>
      <a class="btn btn-default" href="#" role="button">Middle</a>
      <div class="btn-group" role="group">
        <a aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"
        role="button">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider" role="separator"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>

  </div>
</div>

Basic

Button toolbar

Nesting

Size

Vertical variation

Justified

Left Middle

⌃