5 September 2018 (Thursday, September 6, 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)