Menu
Membuat animasi underline hover effect menggunakan css

Membuat animasi underline hover effect menggunakan css

  • November 21st, 2018

Beberapa kali ketika saya berkunjung di web maupun blog, saya menemukan banyak sekali web maupun blog yang memiliki desain yang menarik pada bagian menu. Dari berbagai macam jenis menu effect tersebut, mungkin salah satunya yang membuat saya tertarik untuk membuatnya adalah animasi underline hover pada menu dimana effect dari animasi ini adalah adanya sebuah underline atau garis bawah pada sebuah link menu ketika kita menghovernya atau menyentuhnya.

Dari ketertarikan tersebut saya mencoba mencari dan mempelajari cara membuatnya di internet dan akhirnya animasi underline hover effect versi saya berhasil terbuat. Nah melalui postingan ini saya mencoba mendokumentasikannya.

Kode HTML untuk animasi underline hover

Pertama kita buat empat buah text item dengan html, dimana keempat item tersebut akan mempunyai effect yang berbeda-beda sebagai berikut.

<div class="wrap">
	<div class="item item-1">Sentuh Aku</div><br>
	
	<div class="item item-2">Sentuh Aku</div><br>
	
	<div class="item item-3">Sentuh Aku</div><br>
	
	<div class="item item-4">Sentuh Aku</div><br>
</div>

Kode CSS untuk animasi underline hover

Lalu kita akan atur css nya agar keempat item html di atas dapat memunculkan animasi underline hover effect.

.wrap{
	text-align:center;
	padding: 100px;
}
.item{
	font-size: 50px;
	font-family: 'Arial';
	color: #920000;
	text-transform: uppercase;
	margin: 30px;
	transition: all 0.5s ease;
	position:relative;
        display: inline-block;
}
.item:before, .item:after{
        position:absolute;
        display: block;
        content: '';
        bottom: -10px;
        width: 0px;
        height: 5px;
        background: #D34EB4;
        transition: all 1s ease;
	opacity: 0;
}
/*-------------------------
-- untuk animasi item-1 ---
--------------------------*/
.item-1:after{
	left: 0;
}
.item-1:hover::after {
    width: 100%;
	opacity: 100;
}
/*-------------------------
-- untuk animasi item-2 ---
--------------------------*/
.item-2:after{
	right: 0;	
}
.item-2:hover::after {
        width: 100%;
	opacity: 100;
}
/*-------------------------
-- untuk animasi item-3 ---
--------------------------*/
.item-3:before{
	left: calc(50%);
}
.item-3:after{
	right: calc(50%);
}
.item-3:hover::before{
	width: 50%;
	opacity: 100;
}
.item-3:hover::after{
	width: 50%;
	opacity: 100;
}
/*-------------------------
-- untuk animasi item-4 ---
--------------------------*/
.item-4:before{
	left: 0;
}
.item-4:after{
	right: 0;
}
.item-4:hover::before{
	width: 50%;
	opacity: 100;
}
.item-4:hover::after{
	width: 50%;
	opacity: 100;
}

Dan hasilnya seperti ini

Sentuh Aku

Sentuh Aku

Sentuh Aku

Sentuh Aku

Penjelasan dan tips

Sebenarnya css pada animasi ini adalah memanfaatkan background color dari sebuah tag html, dimana kondisi pertama background color disembunyikan dengan cara mengatur width:0, lalu kondisi ketika di hover width nya diperlebar. Dan dengan fitur animasi css maka effect width yang melebar menjadi cantik. Untuk detail css nya terkait hover, before, after teman-teman dapat mencari penjelasannya di internet.

Nah dari kodingan di atas, teman-teman dapat memvariasinya sendiri misalnya dari warnanya menjadi ikut beranimasi, trus posisi sedikit geser, ataupun animasinya bergerak vertikal. Animasi underline hover effect ini dapat digunakan misalnya untuk bagian menu web, link, maupun dalam sebuah artikel. Demikian sedikit catatan dari saya. Have a nice day gaes.

 

Posted In:
web desain

Add commentYour email address will not be published

Kategori