Published at September 2018
Content Category :
Blogger
Berikut adalah Cara untuk Memperhalus Effect Hover pada CSS :
- Contoh jika baris CSS seperti ini :
.hover-effect-test {
width: 100%;
height: 150px;
background: #11529a;
border: 2px solid #2d2d2d;
border-radius: 5px;
}
.hover-effect-test:hover {
width: 100%;
height: 150px;
background: #2466b0;
border: 2px solid #2d2d2d;
border-radius: 50%;
}
Maka
Hasil Effect Hover dari Kode CSS diatas akan kaku seperti ini :
- Untuk Memperhalus Effect Hover, tambahkan Kode ini didalam baris CSS :
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
- Sehingga Kode CSS Menjadi Seperti ini :
.hover-effect-test {
width: 100%;
height: 150px;
background: #11529a;
border: 2px solid #2d2d2d;
border-radius: 5px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
.hover-effect-test:hover {
width: 100%;
height: 150px;
background: #2466b0;
border: 2px solid #2d2d2d;
border-radius: 50%;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
}
Semoga Bermanfaat, Happy
Blogging :)
CONVERSATION