Cara Membuat Tombol Demo

 Pada kesempatan kali ini saya akan berbagi cara membuat tombol demo di dalam postingan blog. Bagi blog yang berniche tutorial tombol demo sangat diperlukan guna menunjukkan hasil tutorial yang dijabarkan di dalam postingan tersebut berfungsi/berhasil kepada pengunjung blog.

 Bagi sobat yang ingin menerapkannya ke dalam blog sobat silahkan simak langkah langkah cara membuat tombol demo di dalam postingan blog.

 Dalam tutorial kali ini saya menggunakan font awesome bawaan dari template ini, jika template blog sobat belum menggunakan fontawesome silahkan copy kode dibawah ini lalu letakkan diatas kode </head> dalam template sobat.

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

 Selanjutnya masih dalam mode edit HTML cari kode ]]></b:skin> atau </style> gunakan Ctrl+F untuk mempercepat pencarian. copy kode dibawah ini dan letakkan diatas kode ]]></b:skin> atau </style>.

#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: 3px solid #800040;
    margin: 10px;
    transition: .5s;
}

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

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

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

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

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

.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: 25px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #800040;
    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: #efa666;
}

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

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    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;
}

Simpan tema

 Selanjutnya masukkan kode dibawah ini dalam mode penulisan HTML

<center>
<div id="wrap">
<a class="btn-slide" href="#">
  <span class="circle"><i class="fa fa-refresh"></i></span>
  <span class="title">Klik Demo</span>
  <span class="title-hover">Klik Disini</span>
  </a></div>
</center>

Ganti # dengan url tujuan sobat

 Tampilannya akan tampak seperti contoh dibawah ini

 Demikian sobat tutorial cara membuat tombol demo didalam postingan blog, semoga artikel ini bermanfaat bagi sobat sekalian dan selamat mencoba.