Kumpulan Efek Hover 2D Keren Menggunakan CSS

Assalamualaikum wr wb

Pada postingan kali ini, saya akan membahas tentang berbagai macam efek hover menggunakan CSS. Efek ini bisa anda terapkan diberbagai macam objek seperti gambar, tombol, dan lainnya. Tidak perlu berlama-lama langsung contoh efek dibawah ini.

Arahkan atau dekatkan kursor ke kotak

2D Transitions || By : Moh. Syairi

GROW

SHRINK

Bounce In

Bounce Out

Rotate

Grow Rotate

Float

Sink

Lalu begaimana cara membuatnya.?? Kita langsung saja.

Efek Grow (Membesar)

GROW

<style>
#grow{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#grow:hover, .grow:focus, .grow:active {-webkit-transform: scale(1.1);transform: scale(1.1);background-color:#28CADA;}
</style>
<div id="grow" style="float:left">GROW</div>

Efek Shrink (Mengecil)

SHRINK

<style>
#shrink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#shrink:hover, .shrink:focus, .shrink:active {-webkit-transform: scale(0.9);transform: scale(0.9);background-color:#28CADA;}
</style>
<div id="shrink" style="float:left">SHRINK</div>

Efek Bounce In (Memantul Masuk)

BOUNCE IN

<style>
#Bounce_In{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;}
#Bounce_In:hover, .Bounce_In:focus, .Bounce_In:active {-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;}
</style>
<div id="Bounce_In" style="float:left">BOUNCE IN</div>

Efek Bounce Out (Memantul keluar)

BOUNCE OUT

<style>
#Bounce_Out{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.5s;}
#Bounce_Out:hover, .Bounce_Out:focus, .Bounce_Out:active {  -webkit-transform: scale(0.8);transform: scale(0.8);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);background-color:#28CADA;}
</style>
<div id="Bounce_Out" style="float:left">BOUNCE OUT</div>

Efek Rotate (Memutar)

ROTATE

<style>
#Rotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#Rotate:hover, .Rotate:focus, .Rotate:active {-webkit-transform: rotate(4deg);transform: rotate(4deg);background-color:#28CADA;}
</style>
<div id="Rotate" style="float:left">ROTATE</div>

Efek Grow Rotate (Membesar Memutar)

GROW ROTATE

<style>
#GrowRotate{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#GrowRotate:hover, .GrowRotate:focus, .GrowRotate:active {  -webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);background-color:#28CADA;}
</style>
<div id="GrowRotate" style="float:left">GROW ROTATE</div>

Efek Float (Keatas)

FLOAT

<style>
#float{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#float:hover, .float:focus, .float:active {-webkit-transform: translateY(-8px);transform: translateY(-8px);background-color:#28CADA;}
</style>
<div id="float" style="float:left">FLOAT</div>

Efek Sink (kebawah)

SINK

<style>
#sink{background-color:#eaeaea;width:100px;text-align:center;padding:20px;margin:5px;border:1px solid #aeaeae;border-radius:5px;transition-duration: 0.3s;}
#sink:hover, .sink:focus, .sink:active {  -webkit-transform: translateY(8px);transform: translateY(8px);background-color:#28CADA;}
</style>
<div id="sink" style="float:left">SINK</div>

Sekian pembahasan mengenai efek hover 2D dan semoga bisa bermanfaat.