CSS ile Button Hover Animasyon

CSS ile düğmelerin üzerine gelindiğinde tetiklenecek animasyonlar oluşturmak, kullanıcı arayüzüne ilgi ve etkileşim katmanın harika bir yoludur. Bu makalede, CSS’nin :hover sözde sınıfını kullanarak basit ve etkileyici düğme animasyonları oluşturmanın temellerini inceleyeceğiz.

CSS ile button hover animasyonları oluşturmak, kullanıcı arayüzünüze ilgi ve etkileşim katmanın eğlenceli ve kolay bir yoludur. Biraz deneme ve hata ile, web siteniz veya uygulamanız için harika animasyonlar oluşturabilirsiniz.

CSS Animasyonlar ile hayal gücünüze göre çok karmaşık animasyonlar yapabilirsiniz. Basitçe genel olarak kullanılan animasyon türleri;

• Renk Değişimi
• Boyut Değişikliği
• Transform Değişikliği
• Gölgelendirme

Önemli Notlar:

• Animasyonlarınızın kullanıcı dostu olduğundan emin olun. Çok karmaşık veya dikkat dağıtıcı animasyonlar kullanıcı deneyimini olumsuz etkileyebilir.
• Animasyonlarınızın tarayıcı uyumluluğunu test edin. Tüm tarayıcılarda aynı şekilde görünmeyebilirler.
• Performansı göz önünde bulundurun. Karmaşık animasyonlar, web sitenizin veya uygulamanızın yavaşlamasına neden olabilir.

Button hover animasyon için küçük bir örnek hazırladım. Hazırladığım örneğin çalışan halini şuradan inceleyebilirsiniz. CSS Button Hover Animation (codepen.io)

HTML

<button> 
  Hover Me
</button>

CSS

button {
    padding: 0.8em 1.8em;
    border: 2px solid orangered;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    transition: .3s;
    z-index: 1;
    font-family: inherit;
    color: white;
}
button::before {
    content: '';
    width: 0;
    height: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) 
        rotate(45deg);
    background: orangered;
    transition: .5s ease;
    display: block;
    z-index: -1;
}
button:hover::before {
    width: 105%;
}
button:hover {
    color: #111;
}