Membuat tombol slide menggunakan CSS.

Membuat tombol slide menggunakan CSS. Latihan CSS berikut ini sangat mudah dan begitu simpel, hanya dengan menggunakan sedikit CSS dan kode HTML kita sudah memiliki satu buah tombol dengan efek slide layaknya menggunakan javascript atau sejenisnya, latihan CSS berikut ini saya dapatkan dari situs WDC, adapun membuat tombol slide ini murni menggunakan css, atau tanpa menggunakan script lain-lain. Berikut screen shoot dan demo tombol slide menggunakan css.

Demo

HTML :

<a href="#" class="btn-slide">
  <span class="circle"><span><b>&rarr;</b></span></span>
  <span class="title">Slide to Unlock</span>
  <span class="title-hover">Unlocked!</span>
</a>

CSS :

.btn-slide {font-family:arial;font-weight:bold;color:#333;
  position: relative;
  display: inline-block;
  height: 50px;
  width: 200px;
  line-height: 50px;
  padding: 0 20px;
    -moz-box-shadow:0 1px 0 #fff;-ms-box-shadow:0 1.3px 0 #fff;-o-box-shadow:0 1.3px 0 #fff;-webkit-box-shadow:0 1.3px 0 #fff;box-shadow:0 1.3px 0 #fff;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  transition: .5s;
  -webkit-transition: .5s;
  border: 1px solid rgba(0,0,0,0.15);
}
  .btn-slide:hover {
    background-color: #b6b6b6;-moz-box-shadow:0 1px 0 #fff;-ms-box-shadow:0 1.3px 0 #fff;-o-box-shadow:0 1.3px 0 #fff;-webkit-box-shadow:0 1.3px 0 #fff;box-shadow:0 1.3px 0 #fff;
  }
    .btn-slide:hover span.circle {
      left: 100%;
      margin-left: -45px;
      background-color: #b0b0b0;-moz-box-shadow:0 1px 0 #fff;-ms-box-shadow:0 1.3px 0 #fff;-o-box-shadow:0 1.3px 0 #fff;-webkit-box-shadow:0 1.3px 0 #fff;box-shadow:0 1.3px 0 #fff;
    border: 1px solid rgba(0,0,0,0.15);
    }
    .btn-slide:hover span.title {
      left: 40px;
      opacity: 0;
    }
    .btn-slide:hover span.title-hover {
      opacity: 1;
      left: 40px;
    }
  .btn-slide span.circle {
    display: block;
    background-color:#b0b0b0;-moz-box-shadow:0 1px 0 #fff;-ms-box-shadow:0 1.3px 0 #fff;-o-box-shadow:0 1.3px 0 #fff;-webkit-box-shadow:0 1.3px 0 #fff;box-shadow:0 1.3px 0 #fff;
    border: 1px solid rgba(0,0,0,0.15);
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    -webkit-transition: .5s;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }
  .btn-slide span.title,
  .btn-slide span.title-hover {
    position: absolute;
    left: 80px;
    transition: .5s;
    -webkit-transition: .5s;
  }
  .btn-slide span.title-hover {
    left: 80px;
    opacity: 0;
  }

Share this: