Kursus Web Design Grogol Membuat Button Hover Animasi

Hallo teman-teman pada kesempatan kali ini kami kursus web design grogol akan membahas tentang cara Membuat Button Hover Animasi Part II.

Seperti pada materi pembahasan sebelumnya tentang Membuat Button Hover Animasi Part I Sebelumnya dalam Membuat Button Hover Animasi. Teman-teman harus sudah menguasai tentang HTML, CSS, dan Jquery. Karena kalau belum menguasai atau belum mengenal ketiga bahasa itu maka teman-teman akan sulit dalam memahaminya.

Baca artikel sebelumnya : Membuat Button Hover Animasi Part I.

Oke tanpa panjang lebar, langsung saja kita mulai dalam Membuat Button Hover Animasi Part II. Pertama-tama buka text-editornya terlebih dahulu lalu ketikan script htmlnya seperti dibawah ini :

<div class="container">
  <button class="btn btn_animasi">Button</button>
</div>

Jika sudah sekarang teman-teman masukan script cssnya seperti dibawah ini :

.container{margin:auto; width:200px;}
.btn{
    padding: 25px 80px;
    cursor: pointer;
    overflow : hidden;
    background: none;
    border: 3px solid #3498db;
    border-radius: 0;
    color: #3498db;
    font-size: 23px;
    position: relative;
    z-index : 1;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}


.btn:before{
    position: absolute;
    content: '';
    z-index: -1;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn_animasi:before{
    width: 100%;
    height: 0;
    background-color: #3498db;
    -moz-opacity: 0;
    opacity: 0;
    top: 50%;
    left: 50%;
    -moz-transform : translate(-50%,-50%) rotate(45deg);
    -webkit-transform : translate(-50%,-50%) rotate(45deg);
    transform : translate(-50%,-50%) rotate(45deg);
}

.btn_animasi:hover:before{
    height: 240%;
    -moz-opacity: 1;
    opacity: 1;
}

.btn:hover{
     color : #fff;
}

Jika sudah selanjutnya teman-teman simpan dan run/jalankan dibrowser yang teman-teman gunakan. Maka hasilnya akan seperti pada gambar dibawah ini :

Jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Button Hover Animasi Part II.

Oke sekian pembahasan kali ini semoga dapat bermanfaat untuk teman-teman.

Sampai bertemu dipembahasan selanjutnya ya bersama kami kursus web design grogol. Terimakasih

Membuat Button Hover Animasi Part II

Kategori