aw-buton-thumb

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.

Bu da ilginizi çekebilir  CSS ile Title ve Alt Etiketlerini Renklendirin

Sola Animasyonlu Buton

aw-buton-sola

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

Sağa Animasyonlu Buton

aw-buton-saga

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

Yukarı Animasyonlu Buton

aw-buton-yukari

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

Aşağı Animasyonlu Buton

aw-buton-asagi

  <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

aw-buton-sari

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

Yeşil Buton

aw-buton-yesil

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

Kırmızı Buton

aw-buton-kirmizi

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

Gri Buton

aw-buton-gri

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



  • Furkan

    mükemmelsiniz ya

  • Myst3ry

    süper olmuş yeni yapacagım mybb temada kullanacagım yeni konu / yeni yorum yerlerinde.
    temayı yayınlarken teşekkür mesajı olarak alta not yazarım

  • Can

    Çok saolasın editleyip kullandım ellerine sağlık

  • 3d stüdyosu

    Çok faydalı bir paylaşım teşekkürler

  • Burak Şanda

    Teşekkürler fakat fontlar farklı.Font sayısını artırırsanız güzel olur.

  • Photoshop_man

    çok yoz ya

  • Amator Tasarımcı

    Çok etkileyici olmuş 🙂 Ayrıca bu ikon seti olayını öğrendiğim çok iyi oldu. Teşekkürler 🙂 Çalışmalarınızın devamını bekliyoruz ..

  • yusuf

    Butona Link Verince butona birşeyler oluyor nasıl link vericeğim buna

    • Ahmed Cihan Yamaneren

      Butona link verilmez. Javascript click ile location yapacaksınız. veya farklı event’leri kullanabilirsiniz.