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ı.
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.
CSS3 ile Animasyonlu Flat Butonlar
Hiç yorum yok:
Yorum Gönder