Membuat Tombol Menarik Dengan Transition CSS
Hallo teman-teman, kembali lagi di panduan Source Code Aplikasi, kali ini kita akan belajar mengenai bagaimana cara membangun tombol menarik dengan transition css.
Sebelumnya mungkin saya akan menjelaskan sedikit mengenai apa itu transisi di css, transisi di css ialah suatu efek yang terdapat di css3 yang dapat membangun efek animasi didalam style css kita.
Nah, bagi kasus kali ini kita akan mendesain sebuah tombol yang akan kita berikan efek animasi, pertaman silahkan teman-teman bikin 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 apabila telah 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>
Jikalau telah silahkan teman-teman save, karenanya hasilnya akan seperti berikut ini :
Silahkan teman-teman hover di element tersebut, apabila dihover karenanya akan terjadi animasi, dan hasilnya akan seperti berikut ini :
oke teman-teman lumayan gampang yah, silahakan praktekan dirumah, lumayan sekianlah dulu bagi panduan kali ini mengenai membangun tombol menarik dengan transition css semoga bermanfaat, terimakasih 🙂
Sumber https://kursuswebsite.org
