.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);
}
İskeletimiz, geçiş animasyonlarımız, boyutlandırmalarımız ve benzeri tüm stillerimiz artık hazır. Artık animasyon ve geçiş yönlerini belirtelim.

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