Kumpulan Efek Hover 2D Keren Menggunakan CSS

Kumpulan Efek Hover 2D Keren Menggunakan CSS

Sebelumnya saya sudah membahas mengenai Kumpulan Efek Hover Background Transisi Menggunakan CSS Anda bisa melihatnya Klik Ini. Nah 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 Kumpulan Efek Hover 2D Keren Menggunakan CSS , Dilain pembahasan insyaAllah saya akan membahas efek hover yang lainnya. Semoga artikel ini bermanfaat dan menambah wawasan teman-teman.