Membuat Effect Wave ketika link hover


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 


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.
Previous
Next Post »

Berkomentar dengan bijak dan sopan. Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Thanks for your comment