Membuat Sliding Button saat Mengklik Hover Button

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.