Membuat Sliding Button saat Mengklik Hover Button – Sliding button ini dibuat oleh Michael Truong yang saya dapatkan di CodePen. Ketika Anda mengklik hover button akan nampak teks baru pada sliding button, dan nampak ada dua teks baru pada satu button dengan dibedakan warna. Bagi saya ini sebuah sliding button yang menarik namun transisinya agak cepat tapi bisa diatur pada properti transition
.
Dari sampel di bawah ini kita buat dua div dengan selektor class, di dalamnya masukan masing-masing sebuah teks READY dan CANCEL dengan class
untuk teks tersebut. Dari setiap class
tersebut ditambahkan sebuah teks dengan class
baru di dalamnya untuk menampilkan hover button dengan aksi sliding button.
<div id="holder"> <div class="button"> <p class="btnText">READY?</p> <div class="btnTwo"> <p class="btnText2">GO!</p> </div> </div>
Untuk button READY ditambahkan selektor class
baru dengan menambahkan sebuah teks GO dan set class
di dalamnya.
<div class="button"> <p class="btnText">CANCEL</p> <div class="btnTwo"> <p class="btnText2">X</p> </div> </div> </div>
Seperti halnya button READY, untuk button CANCEL ditambahkan juga sebuah selektor class
baru. Anda cukup memasukan simbol “X” saja dan set class
juga di dalamnya.
Sekarang kita masukan style untuk menampilkan sliding button setiap Anda akan mengklik hover button.
@import url(http://fonts.googleapis.com/css?family=Roboto:700); body{background : #DDD; font-family : Roboto;} #holder{ background: white; padding: 10px; width: 250px; margin: 60px auto; box-shadow: 0px 3px 10px rgba(0,0,0,0.2); }
Sebagai awal dibuat terlebih dahulu box dengan background putih dan supaya terlihat menarik tambahkan bayangan pada properti box-shadow
.
.button { background: #3D4C53; margin : 20px auto; width : 200px; height : 50px; overflow: hidden; text-align : center; transition : .2s; cursor : pointer; box-shadow: 0px 1px 2px rgba(0,0,0,.2); } .btnText { color : white; transition : .3s; }
Untuk selektor button
yang aktif pertama diperlihatkan adalah teks button READY dan CANCEL, yang perlu Anda perhatikan di sini adalah Anda harus set nilai hidden
untuk properti overflow
. Ini berguna untuk menyembunyikan button teks yang kedua. Ditambahkan properti transition
yang berguna untuk gerakan pada saat hover button diklik. Agar terlihat sebuah pointer
set juga pada properti cursor
. Tambahkan sedikit bayangan pada properti box-shadow
.
Dari pengaturan style button ini coba Anda lihat di browser, dua button di dalam box sudah terlihat. Akan tetapi jika Anda mengkliknya tidak bergerak sama sekali nampak masih statis. Button yang kedua tidak akan muncul karena sudah diset hidden.
Nah, sekarang kita set untuk teks button yang kedua yaitu GO dan X , kita atur juga posisinya. Anda masukkan kode di bawah ini setelah kode css di atas tadi.
.btnTwo { position : relative; width : 200px; height : 100px; margin-top: -100px; padding-top: 2px; background : #26A69A; left : -250px; transition : .3s; } .btnText2 { margin-top : 63px; margin-right : -130px; color : #FFF; } .button:hover .btnTwo{ /*When hovering over .button change .btnTwo*/ left: -130px; } .button:hover .btnText{ /*When hovering over .button change .btnText*/ margin-left : 65px; } .button:active { /*When button is clicked*/ box-shadow: 0px 5px 5px rgba(0,0,0,0.4); }
Setelah mengatur button kedua perhatikan properti position
diatur pada nilai relative
ini berguna untuk memindahkan kotak berisi teks sementara ke kiri dengan mengatur properti left
diset dengan nilai minus. Begitu juga dengan properti pada teks button, atur margin-right
dengan nilai minus juga.
Untuk menampilkan hover button, tambahkan properti hover
untuk selektor button
. Nah, yang digerakan dalam transisi adalah pada selektor btnTwo
dengan memasukan properti left dengan memberi nilai minus dan selektor btnText
dengan memasukan properti margin-left
dengan nilai plus yang berguna untuk menggeserkan button teks ke arah kanan.
Maka Anda akan melihat dua buah teks yang berdampingan dalam satu button ketika hover button diklik akan tampil teks button GO dan READY; X dan CANCEL.
Tampilannya akan menjadi seperti ini:
See the Pen Material Button Hover by Michael Truong (@YikesItsMikes) on CodePen.
Adhy Suryadi says
Mainin css emang mengasyikan ya mas hhehehe…. kayak mengandung candu xixixixi………. 😀
Ahmad Fahrurroji says
Iya kang, kadang bisa seharian ngulik css, ga bosen-bosen kang 😀