informasi investasi, informasi saham, informasi forex, informasi kripto, informasi saham hari ini, informasi forex hari ini, informasi kripto hari ini, fundamental saham, fundamental forex, fundamental kripto, berita investasi, berita saham, berita forex, berita kripto, berita saham hari ini, berita forex hari ini, berita kripto hari ini, artikel investasi, artikel saham, artikel forex, artikel kripto, prediksi saham, prediksi forex, prediksi kripto, analisa saham, analisa forex, analisa kripto, trading saham, trading forex, trading kripto, belajar trading saham, belajar trading forex, belajar trading kripto, panduan trading saham, panduan trading forex, panduan trading kripto, tips trading saham, tips trading forex, tips trading kripto.
image3

Cara Memperhalus Effect Hover pada CSS

Published at September 2018
Content Category : Blogger
Tokocrypto Powered by Binance

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

Bagikan :

CONVERSATION