CSS3 ile Animasyonlu Flat Butonlar

Sadece CSS3‘ün geçiş efektlerini ve Font Awesome’ın şık ikonlarını kullarak etkileyici butonlar tasarlamak mümkün. Adobewordpress, üzerlerine gelince istediğiniz yönde animasyon geçişleri yapan bu butonları olabildiğince basit ve performanslı olarak sizler için hazırladı.

ÖRNEĞİ GÖRÜNTÜLE

Buton Tasarımları

Font Awesome ikon setini yükleyelim. Bu kodları head elemanı içerisine ekleyebilirsiniz.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" >

Biz yukarıda Font Awesome’ı kendi sunucusu üzerinden çağırdık. Önerimiz bu CSS dosyasını download edip kendi sunucunuz üzerinde yayımlamanız yönünde.

Şimdi de genel ve her türden butonumuz için ihtiyaç duyacağımız CSS kodlarımız ile başlayalım.

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

CSS tarafındaki son yapmamız gereken de renklendirmeleri eklemek :

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

Tasarımlarımız hazır. Şimdi HTML ile butonlarımıza hayat verelim!

Butonlar

Biz 7 adet butonun HTML kodlarını paylaşacağız. Ancak basit CSS kodlarımız sayesinde farklı renk ve boyutlarda, hatta yeni animasyonlarda butonlar hazırlayabilirsiniz.

Sola Animasyonlu Buton

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

---

Sağa Animasyonlu Buton

  <button class='buton buton-saga'>
    <span><i class="fa fa-chevron-right"></i> .buton .buton-saga</span>
  </button>

---

Yukarı Animasyonlu Buton

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

---

Aşağı Animasyonlu Buton

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

Renklendirmeler

Aynı Bootstrap’in yaptığı gibi disabled, warning, danger, success ve primary tanımlamalarına uygun renklendirmeler hazırladık.

Sarı Buton

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

---

Yeşil Buton

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

---

Kırmızı Buton

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

---

Gri Buton

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

Sadece CSS ile Şık Butonlar Hazırlamak

Artık JPG, GIF ve PNG gibi formatlarda hazırlanan resim butonların devri kapandı. Daha performanslı ve SEO uyumlu CSS butonlar her yerde görmek mümkün. Hal böyleyken bizlerde buton tasarımı konularımıza bir yenisini eklemek istedik.

Yorumlarınızı bekliyoruz.