Kredit Instant hingga 30 Juta!
Trading dengan Broker Terbaik

Cara memperhalus Effect Hover pada CSS

5 September 2018 ()

Hai! Berikut ini adalah Cara untuk memperhalus Effect Hover pada CSS :

  •  Contoh jika baris CSS seperti ini :
.built2bless-hover {
    width: 100%;
    height: 150px;
    background: #ff6600;
    color: #fff;
    border-radius: 0%;
}

.built2bless-hover:hover {
    width: 100%;
    height: 150px;
    background: #ff6600;
    color: #fff;
    border-radius: 100%;
}
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 :
.built2bless-hover {
    width: 100%;
    height: 150px;
    background: #ff6600;
    color: #fff;
    border-radius: 0%;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

.built2bless-hover:hover {
    width: 100%;
    height: 150px;
    background: #ff6600;
    color: #fff;
    border-radius: 100%;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

  • Hasil :




ARAHKAN MOUSE KESINI

Semoga Bermanfaat, Happy Blogging :)

Tags : Blogger CMS (Content Management System)