<div class="container">
  
  <div class="row">
    <h1>Flat Buttons</h1>
    <div class="col-md-8 col-md-offset-2">
      <h3>Normal Buttons</h3>
      <div class="btn btn-flat btn-ft-blue btn-lg">
        <a href="#">
          <i class="fa fa-save"></i> Save
        </a>
      </div>

      <div class="btn btn-flat btn-ft-red btn-lg">
        <a href="#">
          <i class="fa fa-trash-o"></i> Delete
        </a>
      </div>

      <div class="btn btn-flat btn-ft-yellow btn-lg">
        <a href="#">
          <i class="fa fa-warning"></i> Warning
        </a>
      </div>

      <div class="btn btn-flat btn-ft-green btn-lg">
        <a href="#">
          <i class="fa fa-spin fa-refresh"></i> Update
        </a>
      </div>
      
      
      
      
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <h3>Small Buttons</h3>
      <div class="btn btn-flat-sm btn-ft-blue btn-lg">
        <a href="#">
          <i class="fa fa-save"></i> 
        </a>
      </div>

      <div class="btn btn-flat-sm btn-ft-red btn-lg">
        <a href="#">
          <i class="fa fa-trash-o"></i> 
        </a>
      </div>

      <div class="btn btn-flat-sm btn-ft-yellow btn-lg">
        <a href="#">
          <i class="fa fa-warning"></i> 
        </a>
      </div>

      <div class="btn btn-flat-sm btn-ft-green btn-lg">
        <a href="#">
          <i class="fa fa-spin fa-refresh"></i> 
        </a>
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
    <h3>Social Buttons</h3>
      
      <div class="btn btn-flat btn-ft-facebook btn-lg">
        <a href="#">
          <i class="fa fa-facebook"></i> Facebook
        </a>
      </div>
      <div class="btn btn-flat btn-ft-twitter btn-lg">
        <a href="#">
          <i class="fa fa-twitter"></i> Twitter
        </a>
      </div>
      <div class="btn btn-flat btn-ft-google-plus btn-lg">
        <a href="#">
          <i class="fa fa-google-plus"></i> Google+
        </a>
      </div>
      <div class="btn btn-flat btn-ft-linkedin btn-lg">
        <a href="#">
          <i class="fa fa-linkedin"></i> Linkedin
        </a>
      </div>
      <div class="btn btn-flat btn-ft-youtube btn-lg">
        <a href="#">
          <i class="fa fa-youtube"></i> Youtube
        </a>
      </div>
      <div class="btn btn-flat btn-ft-vimeo btn-lg">
        <a href="#">
          <i class="fa fa-vimeo-square"></i> Vimeo
        </a>
      </div>
      
      
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
    <h3>Social Buttons Small</h3>
      
      <div class="btn btn-flat-sm btn-ft-facebook btn-lg">
        <a href="#">
          <i class="fa fa-facebook"></i> 
        </a>
      </div>
      <div class="btn btn-flat-sm btn-ft-twitter btn-lg">
        <a href="#">
          <i class="fa fa-twitter"></i> 
        </a>
      </div>
      <div class="btn btn-flat-sm btn-ft-google-plus btn-lg">
        <a href="#">
          <i class="fa fa-google-plus"></i> 
        </a>
      </div>
      <div class="btn btn-flat-sm btn-ft-linkedin btn-lg">
        <a href="#">
          <i class="fa fa-linkedin"></i> 
        </a>
      </div>
      <div class="btn btn-flat-sm btn-ft-youtube btn-lg">
        <a href="#">
          <i class="fa fa-youtube"></i> 
        </a>
      </div>
      <div class="btn btn-flat-sm btn-ft-vimeo btn-lg">
        <a href="#">
          <i class="fa fa-vimeo-square"></i> 
        </a>
      </div>
      
      
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2" >
      <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" ><img alt="Creative Commons License" style=" margin:0 0 25px 0; border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
    </div>
  </div>
  

</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

/*
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Create by WolfCreativo.com & Guillermo Caballero

Date Jun 16 2015

*/
body {
  background:#333;
  color:#fff;
  padding-top:50px;
  font-family: "open sans";
}
a {
  color:#fff;
}
a:hover {
  color:#fff;
}
h3 {
  color:#fff;
  font-weight:500;
  margin:50px 0;
}
/* Flat Buttons*/
.btn-flat {
  font-weight:400;
  border-radius:3px;
  float:left;
  margin-right:30px; /*delete this line*/
  margin-bottom:30px;/*delete this line*/
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.btn-flat-sm {
  font-weight:400;
  border-radius:3px;
  float:left;
  margin-right:30px;
  margin-bottom:30px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.btn-flat-sm a {
  color:#fff;
  text-decoration:none;
  
}
.btn-flat a {
  color:#fff;
  text-decoration:none;
  
}
.btn-flat a i {
  margin-right:7px;
  color:#f4f4f4;
}
.btn-ft-blue {
  background-color:#51aded ;
}
.btn-ft-blue:hover {
  background-color:#3175b8 ;
}
.btn-ft-red {
  background-color:#ed5153 ;
}
.btn-ft-red:hover {
  background-color:#bb282a ;
}
.btn-ft-yellow {
  background-color:#e7c13e ;
}
.btn-ft-yellow:hover {
  background-color:#d0ac2c ;
}
.btn-ft-green {
  background-color:#2ecc71 ;
}
.btn-ft-green:hover {
  background-color:#27ae60 ;
}
.btn-ft-facebook {
  background-color:#4d70a7;
}
.btn-ft-facebook:hover {
  background-color:#345992;
}
.btn-ft-twitter {
  background-color:#07baf1;
}
.btn-ft-twitter:hover {
  background-color:#08acdf;
}
.btn-ft-google-plus {
  background-color:#e2401d;
}
.btn-ft-google-plus:hover {
  background-color:#c52b09;
}
.btn-ft-linkedin {
  background-color:#1786b0;
}
.btn-ft-linkedin:hover {
  background-color:#14759a;
}
.btn-ft-youtube {
  background-color:#ca3736;
}
.btn-ft-youtube:hover {
  background-color:#b52221;
}
.btn-ft-vimeo {
  background-color:#a9d252;
}
.btn-ft-vimeo:hover {
  background-color:#92ba3d;
}