image3

welcome to my blog|hope be useful

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 :)

TAGS : Blogger CSS

Share :

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

PROFIT KONSISTEN DENGAN ROBOT TERBAIK :

FREE Trial Forex EA Trader
Forex Trend Detector
Dynamic Pro Scalper
Forex Diamond EA - Robot Forex Terbaik
WallStreet Forex Robot 2.0 Evolution
Volatility Factor 2.0

CONVERSATION