Geçiş Animasyonlu Basit CSS3 Düğmesi
Geçiş Animasyonlu Basit CSS3 Düğmesi

Geçiş Animasyonlu Basit CSS3 Düğmesi

21 Mar 2017 /

CSS3 ile hazırlanmış fare üzerine gelince değişen animasyonlu basit web butonu yapmaya ne dersiniz.

Öncelikle bu buton nasıl bir butonmuş diye görmek isterseniz çalışan demo görüntüsü için işte buraya tıkla.

Bu uygulama Font Awesome ikon kütüphanesini kullanarak yapılmakta.

Bunun içinde önecelikle bu butonları kullanacağınız sayfaya aşağıdaki stil kodlarını eklemeniz gerekmekte:

 

İkinci css dosyasını indireceğiniz örnek dosyanın içinde bulabilirsiniz.

Kodların çalışma mantığı şöyle. İki adet ikon tanımlanmakta div alanımızın içine ve fare üzerine gelince ikinci ikon aktifleşmekte özetle.

 
 

Buradaki .secon ve  .prim düğmelere hareketi veren stil kodlarının adları.

Şimdi css dosyasını açtığınızda aşağıdaki kodları bularak buton büyüklük ve arka plan renk ayarlarını yapabilirsiniz.

.wcdBtnCnt{ float: left; margin-right:20px; width: 40px; height: 40px; border-radius: 100%; cursor: pointer; position: relative; overflow: hidden;
}
.wcdBtnRed{ background-color: #ff6351;
}

Bu ayarlardan sonra düğmelere kaç saniyede tepki verdirmek istediğinize göre ayar yapmaya geldi sıra;

.wcdBtnCnt > i{ position: absolute; font-size: 1.4em; line-height: 40px; color: #fff; display: block; text-align: center; transition-property: left, opacity; transition-duration: 0.3s
}
.wcdBtnCnt > i.secon{ left:-100%; opacity: 0%;
}
.wcdBtnCnt > i.prim{ left:0; right: 0; margin-left: auto; margin-right: auto;
}

Değişim hız ayarı için 

transition-duration: 0.3s

değerini değiştirebilirsiniz. Bunlar default ayarlar isterseniz aynıda bırakabilirsiniz.

.wcdBtnCnt:hover i.prim{ left:150%; opacity: 0;
}
.wcdBtnCnt:hover i.secon{ left:0; right: 0; margin-left: auto; margin-right: auto; opacity: 1;
}

Ve son olarak css kodunun sonu.

Artık butonlar hazır. Web sayfanızın istediğiniz yerinde kullanabilirsiniz. İndireceğiniz örnek dosyada ister tek buton halinde istersenizde div kutusu ile verilmiş hali var. Siz kendinize göre hangisi lazımsa öyle kullanabilirsiniz.

Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 0 kez değerlendirilmiş ve ortalama 0 yıldız verilmiş.
Bu yazı daha önce 561 kez okundu.

Facebook Yorumları

Yorumlar

Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

guvenlik
Image Analyzer

Image Analyzer

13 Oca 2018 / Multimedya
BitDefender Internet Security

BitDefender Internet Security

13 Oca 2018 / Güvenlik
AIMP

AIMP

13 Oca 2018 / Multimedya
eMule

eMule

13 Oca 2018 / İnternet
Shutter

Shutter

13 Oca 2018 / Araçlar
Shutter

Shutter

13 Oca 2018 / Araçlar
Freez Flv to Mp3 Converter

Freez Flv to Mp3 Converter

13 Oca 2018 / Multimedya
eMule

eMule

13 Oca 2018 / İnternet
Freez 3GP Video Converter

Freez 3GP Video Converter

13 Oca 2018 / Multimedya
EssentialPIM Free Edition

EssentialPIM Free Edition

13 Oca 2018 / Ofis