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.

Daha önce anlattığım “CSS ile Button Hover Animasyon” ve “CSS ile Button Hover Animasyon 2” başlıklı yazılarımı inceleyebilirsiniz.

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.

HTML

<a class="btn">
    <span class="circle">
        <i class="fa-solid fa-angle-right"></i>
    </span>
    <span class="text">MOBİL MUCİT</span>
</a>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

CSS

.btn{
	all:unset;
	width: 120px;
	cursor: pointer;
	display: flex;
	padding: 0.5rem 2rem;
	position: relative;
	align-items: center;
	justify-content: center;
}
.btn > .circle{
	size: 2.5rem;
	left: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 1.5rem;
	position: absolute;
	display: block;
	background-color: #ded8f4;
	z-index: -1;
	transition: all 0.45s ease;
}
.btn > .text{
	margin-left: 1.25rem;
	transition: all 0.45s;
}
.circle > i{
	position: absolute;
	left: calc(2.5rem /2);
	top: calc(2.5rem /2);
	font-size: 1rem;
	color:black;
	transform: translate(-50%, -50%);
	transition: all 0.45s ease;
}
.btn:hover > .circle{
	width: 100%;
}
.btn:hover > .circle > i{
	translate: 1rem 0;
}
.btn:hover > .text{
	color: black
}