Merhaba arkadaşlar! 👋
Bugün sizlere CSS kullanarak, üzerine gelindiğinde animasyon efekti veren harika bir buton nasıl yapılır, buna göz atacağız. Bu yöntemle web sitenize animasyonlu butonlar ekleyerek hem hoş bir görünüm katabilir hem de kullanıcı etkileşimini daha ilgi çekici hale getirebilirsiniz.
HTML Yapısını Hazırlayın
Öncelikle html ile butonumuzu aşağıdaki örnekteki gibi oluşturalım.
<button class="animated-btn">Animasyonlu Buton</button>CSS ile Butona Animasyon Ekleyin
Bu aşamada butona bir :hover (üzerine gelme) animasyonu ekleyeceğiz.
.animated-btn {
padding: 15px 30px;
font-size: 18px;
color: white;
background-color: #3498db;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease; /* Yumuşak bir animasyon ekleyelim */
}
.animated-btn:hover {
background-color: #2980b9;
transform: scale(1.1); /* Butonu büyütme */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Gölge efekti*/
}İşte bu kadar. Butona hoş bir animasyon kazandırmış oldunuz. Kullanıcı fareyi butonun üzerine getirdiğinde, buton büyüyüp renk değiştirecek ve hoş bir gölge efekti verecek. Bu şekilde küçük ama etkili animasyonlar ile daha ilgi çekici web arayüzleri hazırlayabilirsiniz.
Daha fazlasını ve merak ettiklerinizi yorumlarda paylaşmayı unutmayın.
Yorumlar