Your Ads

Buttons

 
<div class="btn-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>

Standard button

<button type="button" class="stl_btn stl_btn_st">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>

Large button

  <button type="button" class="stl_btn stl_btn_lg">Default button</button>
  <button type="button" class="btn btn-primary btn-lg">Primary button</button>
  <button type="button" class="btn btn-primary btn-lg btn-success">Success button</button>
  <button type="button" class="btn btn-primary btn-lg btn-info">Info button</button>
  <button type="button" class="btn btn-primary btn-lg btn-warning">Warning button</button>
  <button type="button" class="btn btn-primary btn-lg btn-danger">Danger button</button>

Button

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

Small button

  <button type="button" class="stl_btn stl_btn_sm">Default button</button>
  <button type="button" class="btn btn-primary btn-sm">Primary button</button>
  <button type="button" class="btn btn-primary btn-sm btn-success">Success button</button>
  <button type="button" class="btn btn-primary btn-sm btn-info">Info button</button>
  <button type="button" class="btn btn-primary btn-sm btn-warning">Warning button</button>
  <button type="button" class="btn btn-primary btn-sm btn-danger">Danger button</button>

Mini button

  <button type="button" class="stl_btn stl_btn_xs">Default button</button>
  <button type="button" class="btn btn-primary btn-xs">Primary button</button>
  <button type="button" class="btn btn-primary btn-xs btn-succes">Success button</button>
  <button type="button" class="btn btn-primary btn-xs btn-info">Info button</button>
  <button type="button" class="btn btn-primary btn-xs btn-warning">Warning button</button>
  <button type="button" class="btn btn-primary btn-xs btn-danger">Danger button</button>

Nested button groups

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
 
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      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>

Single button dropdowns

 <!-- Single button -->
 <div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <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"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
 </div>

Split button dropdowns

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <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"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dropup buttons

<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<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"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Buttons instead of text

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Buttons with dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <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"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

From the Blog

Pellentesque venenatis

Lorem ipsum dolor sit amet, consectetur adipisc in...

Business Website Templates

Ut wisi enim ad minim veniam, quis nostrud exerci ...

Responsive WordPress Theme

Lorem ipsum dolor sit amet, consectetuer adipiscin...

Latest Tweets

  • Error: Could not authenticate you.