CSS ile Linklerinize Animasyonlu Hover

Klasik altı çizgili yazıları animatif hale getirmeye ne dersiniz? CSS3’ün after tanımlamasıyla birlikte bu işlemi yapmak mümkün.

Bu dersimizde linklerimiz için şık bir hover efekti hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Linklere animatif altı çizgili efekti nasıl verilir?

Sadece CSS kodu yazacağız. HTML tarafında yapmamız gereken bir düzenleme yok.

CSS Kodları

İlk olarak linklerimize satır yüksekliği, inline-block yapısı tanımlayalım.

a {
	line-height: 1;
	display: inline-block;
	color:#ffeb3b;
	text-decoration:none;
}

Daha sonra varsayılan after tanımını düzenleyelim. Burada çizgiyi 0 piksel yapalım ki hover olmadığı sürece gözükmesin. Ayrıca geçiş efektini (transition) de bur kısımda tanımlayacağız.

a:after {
	display: block;
	content: "";
	height: 2px;
	width: 0%;
	background-color: #ffeb3b;
	transition: width .3s ease-in-out;
}

Şimdi de üzerine gelindiğinde veya focus olunduğunda çizgiyi 100% genişliğe uzatalım.

a:hover:after,
a:focus:after {
	width: 100%;
}

Bu kadar basit.

İyi çalışmalar.