Abaikan Jika Melihat Iklan Binary Options pada Situs ini, silahkan Baca : Perbedaan Forex dengan Binary Options

Take control of your trading with Exness
image3
Home Content Management System Cara Memperhalus Effect Hover pada CSS

Cara Memperhalus Effect Hover pada CSS

Published at September 2018
Content Category : Content Management System
Take control of your trading with Exness

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

Take control of your trading with Exness