Cara Memperhalus Effect Hover pada CSS

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 :

ARAHKAN MOUSE KESINI

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;
}

Hasil :

ARAHKAN MOUSE KESINI

Semoga Bermanfaat, Happy Blogging :)

Beritahukan melalui Kotak Komentar dibawah apabila ada URL / Link Download yang Rusak.

Memberikan Komentar, Saran, dan Masukan akan sangat membantu laju Blog ini dalam Meningkatkan Kualitas Konten.

Blog ini tidak menyediakan URL / Link Download segala jenis Konten yang Bersifat Ilegal, seperti Crack, Patch, Serial Number, dan Sejenisnya.

Saat mengklik URL / Link Halaman yang menuju keluar dari Blog ini, harap menunggu hitungan mundur 5 detik hingga muncul Button Skip AD, klik Button tersebut untuk menuju Halaman Tujuan.

KONTEN TERKAIT :

PROFIT KONSISTEN DENGAN ROBOT TERBAIK :

Martin Rio

Cara Memperhalus Effect Hover pada CSS

Share :

KONTEN TERKAIT :

CONVERSATION