Membuat Button dengan Efek Slide

Kuy  lah tanpa basa-basi lagi, bisa langsung saja ke intinya.
Tapi, sebelum ke pointnya, alangkah baiknya jika kalian melihat demonya terlebih dahulu, agar kalian tidak merasa salah yang dimaksud dengan judul pada artikel ini.

• DEMO

Sudah melihat demonya? jika sudah, berarti saya anggap kalian sudah tau bagaimana cara kerja dari button tersebut.
Dan sekarang kita menuju ke pointnya.

1. Tambah CSS dibawah ini kedalam, blog/web kalian.

#wrap {
    margin: 20px auto;
    text-align: center;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #f80538;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color:#f80538;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #f80538;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color:#f80538;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #f80538;
    left: 80px;
  }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

2. Untuk memunculkan buttonnya, copy tag dibawah ini ke dalam postinga blog / web kalia.

<div id="wrap">
<a href="https://www.myabdurrahim.com/" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Klik Disini</span>
</a>
<a href="https://www.myabdurrahim.com/" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Klik Disini</span>
</a>
</div>

Jangan lupa, di blog kalian sudah harus ada fontawesome untuk menampilkan iconnya.
Biasanya template blog sekarang pada umumnya sudah menggunakan fontawesome, tetapi jika kalian belum ada, kalian bisa menambahkan fontawesome dibawah ini ke blog/web kalian.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Ok, cukup artikel singkat saya ini, jika kalian masih bingung dengan penjelasan saya, kalian bisa meninggalkan pertanyaan dikolom komentar yang dibawah.
Kalau gak ada pertanyaan, ya Skip ae.