<link rel='stylesheet' href='http://www.adobewordpress.com/wp-content/themes/sparkling/inc/css/font-awesome.min.css' type='text/css' media='all' />
<div class="wrapper">
  <button class='buton buton-saga'>
    <span><i class="fa fa-chevron-right"></i> .buton .buton-saga</span>
  </button>

  <button class='buton buton-sola'>
    <span><i class="fa fa-chevron-left"></i> .buton .buton-sola</span>
  </button>

  <button class='buton buton-yukari'>
    <span><i class="fa fa-chevron-up"></i> .buton .buton-yukari</span>
  </button>

  <button class='buton buton-asagi'>
    <span><i class="fa fa-chevron-down"></i> .buton .buton-asagi</span>
  </button>
</div>

<div class="wrapper">
   <button class='buton buton-sola buton-sari'>
    <span><i class="fa fa-bolt"></i> .buton-sari</span>
  </button>

  <button class='buton buton-yukari buton-yesil'>
    <span><i class="fa fa-search"></i> .buton-yesil</span>
  </button>

  <button class='buton buton-asagi buton-kirmizi'>
    <span><i class="fa fa-check"></i> .buton-kirmizi</span>
  </button>
  
 <button class='buton buton-saga buton-gri'>
    <span><i class="fa fa-adjust"></i> .buton-gri</span>
  </button>
</div>

body{background-color:#2c3e50;}

.wrapper{
  display:table; 
  margin:15px auto;
}


.buton {
  position: relative;
  border: 0;
  font:300 14px 'Open Sans';
  color: #FFFFFF;
  padding: 10px 15px;
  border-radius:3px;
  display: inline-block;
  margin: 5px;
  cursor: pointer;
  overflow: hidden;
  outline:none;
  background: -webkit-linear-gradient(left, #2a83be 40px, #3498db 0);
}

.buton > span > i.fa{
  margin-right:20px;
}
.buton > * {
  position: relative;
  z-index: 5;
}

.buton-saga:after, .buton-sola:after, .buton-yukari:after, .buton-asagi:after{
  position: absolute;
  background: #2a83be;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: 1s cubic-bezier(0.165, 0.85, 0.45, 1);
  transition: 1s cubic-bezier(0.165, 0.85, 0.45, 1);
}

.buton-saga:hover:after {
  left: 0;
}

.buton-saga:after {
  top: 0;
  left: -100%;
}

.buton-sola:hover:after {
  right: 0;
}

.buton-sola:after {
  top: 0;
  right: -100%;
}

.buton-yukari:hover:after {
  bottom: 0;
}

.buton-yukari:after {
  bottom: -100%;
  left: 0;
}

.buton-asagi:hover:after {
  top: 0;
}

.buton-asagi:after {
  top: -100%;
  left: 0;
}

.buton-kirmizi{
  background: -webkit-linear-gradient(left, #c0392b 40px, #e74c3c 0);
}

.buton-kirmizi:after{
  background-color:#c0392b;
}

.buton-yesil{
  background: -webkit-linear-gradient(left, #27ae60 40px, #2ecc71 0);
}

.buton-yesil:after{
  background-color:#27ae60;
}

.buton-sari{
  background: -webkit-linear-gradient(left, #e67e22 40px, #f39c12 0);
}

.buton-sari:after{
  background-color:#e67e22;
}

.buton-gri{
  background: -webkit-linear-gradient(left, #9CA4A9 40px, #bdc3c7 0);
}

.buton-gri:after{
  background-color:#9CA4A9;
}