Membuat Tombol Menarik Dengan Transition CSS

Hallo teman-teman, kembali lagi pada tutorial dumet school, kali ini kita akan belajar tentang bagaimana cara membuat tombol menarik dengan transition css.

Sebelumnya mungkin saya akan menjelaskan sedikit tentang apa itu transisi pada css, transisi pada css adalah suatu efek yang terdapat pada css3 yang dapat membuat efek animasi didalam style css kita.

Nah, untuk kasus kali ini kita akan mendesain sebuah tombol yang akan kita berikan efek animasi, pertaman silahkan teman-teman buat sebuah file htmlnya dan ketikan script berikut ini:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

</head>

<body>
<div class="link">
	
    <a href="">read more</a> 
    <div class="span"></div>  
</div>



</body>
</html>

nah jika sudah silahkan ketikan script stylenya seperti berikut ini:

<style>
body{padding:50px; font-size:20px}
	.link{width:200px; height:50px;position:relative}
	a{width:200px; height:50px; display:block; border:2px solid #333; text-decoration:none; color:#000; text-align:center; line-height:50px;}
	.span{background:#FF2B2B; width:0px; height:54px;position:absolute; top:0; left:0}
	.link:hover .span{width:204px; transition:all 0.2s ease;}
	.link:hover a{color:#FFF;position:absolute; z-index:9999; border:2px solid #FF2B2B;}
</style>

Jika sudah silahkan teman-teman save, maka hasilnya akan seperti berikut ini :

Silahkan teman-teman hover pada element tersebut, jika dihover maka akan terjadi animasi, dan hasilnya akan seperti berikut ini :

oke teman-teman cukup mudah yah, silahakan praktekan dirumah, cukup sekian dulu untuk tutorial kali ini tentang membuat tombol menarik dengan transition css semoga bermanfaat, terimakasih 🙂

Membuat Tombol Menarik Dengan Transition CSS

Kategori