Kali ini, saya ingin membahas sedikit tentang berbagai macam efek hover menggunakan CSS. Efek ini dapat kalian terapkan di macam-macam objek seperti gambar, tombol, dll. Okey untuk itu lihat contoh efek dibawah ini.
Arahkan atau dekatkan kursor ke kotak
Bounce In
Bounce Out
Float
GROW
Grow Rotate
Rotate
SHRINK
Sink
Untuk Cara Penerapannya Dapat Kalian Liat Dibawah Ini.
- 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 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 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 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 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 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 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>Okey, Selanjutnya Terserah Anda Mau Di Pakai Dimana Efek-efek Hover Tersebut,Selamat Mencoba,Sekian...
