Halo teman-teman, pada kesempatan hari ini saya akan mencoba membuat efek hover dengan CSS3. Disini kita akan menggunakan efek transform dari CSS3. Oke kita langsung saja.
- Buatlah sebuah folder untuk menampung semua elemen yang kita butuhkan, saya beri nama efek-hover. Dan buatlah folder baru di dalamnya, beri nama css.
- Kita ketikkan htmlnya sebagai berikut :
Â
<!DOCTYPE html>
<html>
               <head>
                               <title>Efek Kertas Lengkung</title>
                               <link href=”css/hover.css” rel=”stylesheet”>
               </head>
               <body>
                               <a href=”#” class=”button curl-bottom-left”>Lengkung kertas</a>
               </body>
</html>
Save dengan nama index.html di dalam folder efek-hover yang tadi kita buat.
- Kemudian CSSnya seperti dibawah ini :
.button {
padding: 1em;
cursor: pointer;
background: #BC1919;
text-decoration: none;
color: #FBFBFB;
}
Â
.curl-bottom-left {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
Â
.curl-bottom-left:before {
position: absolute;
content: ”;
height: 0;
width: 0;
bottom: 0;
left: 0;
background: white;
Â
background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
Â
.curl-bottom-left:hover:before, .curl-bottom-left:focus:before, .curl-bottom-left:active:before {
width: 25px;
height: 25px;
}
Kemudian save dengan nama hover.css di dalam folder efek-hover/css. Kemudian jalankan pada browser.