Membuat Effect Wave ketika link hover
Wednesday 23 January 2019
Edit
Membuat Effect Wave ketika link hover
Sekarang ini banyak sekali metode yang digunakan untuk mempercantik dan memperindah halaman website, mulai dari framework css hingga plugin css yang mempermudah para developer untuk membuat UI/UX halaman website mereka menjadi lebih menarik dan lebih interaktif.Pada kesempaan kali ini saya akan memberikan tutorial singkat Membuat Effect Wave ketika link hover di css, sebagai contoh saya sudah mempunyai 2 buah gambar di bawah ini yang menggambarkan before after link ketika di hover.
Gambar pertama link yang belum di hover
Gambar kedua link yang di hover
Baca Juga : Free online logo maker dengan design evo
Nah bagaimana cara membuatnya.? yuk simak tutorial singkat berikut ini, buatlah file index dengan format html kemudian silahkan copy dan pastekan kode berikut ini
<a href="#">Hakko Blogs</a><html>
<head>
<title>Membuat Effect Wave ketika link hover | www.hakkoblogs.com</title>
<style>
body {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
}
a {
border-bottom: 1px solid #453886;
color: #453886;
padding-bottom: .25em;
text-decoration: none;
}
a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: bottom;
background-repeat: repeat-x;
background-size: 20%;
border-bottom: 0;
padding-bottom: .3em;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#"><h1>Hakko Blogs</h1></a>
</body>
</html>
Jalankan file tersebut, maka anda akan mendapatkan linkyang ketika hover akan memunculkan effect wave seperti gambar di atas, untuk demo online anda bisa menuju ke link berikut ini
https://codepen.io/geoffgraham/pen/RYQybJ
Semoga tutrorial singkat ini bisa bermanfaat untuk saya dan untuk anda yang membacanya, silahkan dipraktekkan karena tanpa praktek semuanya sekedar teori saja, terus pantau www.hakkoblogs.com untu mendaptkan info seputar tutorial pemrograman, insight dan perembangan bisnis startup.