Geçiş Animasyonlu Basit CSS3 Düğmesi

Geçiş Animasyonlu Basit CSS3 Düğmesi

/ Okuma süresi: 1 dk, 42 sn / Yorum (0)
A A A

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ı emoji ile değerlendir!
like 0
like 0
like 0
like 0
like 0
like 0
Bu yazıyı sosyal medyada paylaş!
Bu yazı daha önce 1078 kez okundu.
Yazıya ait etiketler
Ogznet.com

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

    Yorumlar

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

Yorum Yaz

" Geçiş Animasyonlu Basit CSS3 Düğmesi konulu makalemizde Ogznet.com olarak sizlere Geçiş Animasyonlu Basit CSS3 Düğmesi ile ilgili bilgiler aktarmak istedik. Hemen yukarıda Geçiş Animasyonlu Basit CSS3 Düğmesi ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "

Bir reklam engelleyici kullandığınızı fark ettik

Sorun yok. Kim kullanmıyor ki? Ancak reklam geliri olmadan bu siteyi geliştirmeye devam edemeyiz.

Reklam engelleyicimi devre dışı bıraktım. Devam etmeme izin ver! Reklam engelleyici ile devam etmek istiyorum! Reklam engelleyicimi nasıl devre dışı bırakabilirim?

Bu site için için reklam engelleyici nasıl devre dışı bırakabilirim:

Adblock / Adblock Plus
  • Tarayıcınızın sağ üst kısmındaki AdBlock / AdBlock Plus simgesine tıklayın.
  • "Aşağıdaki adreste reklamları engelle" seçeneğini kapalı konuma getirin.
  • Değişiklikleri etkinleştirmek için "Tazele" butonuna tıklayın.
Firefox Özel Tarama
  • Firefox'ta Özel Tarama yapıyorsanız, "İzleme Koruması" adblock bildirimini kullanabilir. Adres çubuğundaki "Kalkan" simgesini tıklayarak geçici olarak devre dışı bırakılabilir.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
Ghostery
  • Tarayıcınızda Ghostery simgesini tıklayın.
  • Ghostery versiyon 6.0 altı ise "Whitelist site.", versiyon 6.0 ise "Trust site." ye tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
uBlock / uBlock Origin
  • Tarayıcınızda Ublock / Ublock Origin simgesini tıklayın.
  • Mevcut web sitesini beyaz listeye almak için görünen menüde "power" düğmesine tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.