Kali ini saya akan membagikan tutorial membuat Tombol Demo dan Download slider.Biasanya tombol ini sering kita jumpai pada saat mendownload film,atau template blog anda.Code ini saya ambil dari blog arlina design dengan modifikasi sedikit dari saya.Ok simak tutor nya...





Buka blog anda>>Klik Template>>klik edit HTML
Cari kode ]]></b:skin> Atau </style> lalu terapkan code dibawah ini.

body {
margin: 100px;
font-family: helvetica, sans-serif;
background: #fff;
}
#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 #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.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: #0099cc;
}
.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: 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: #efa666;
}
.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: #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;
}

Agar Tombol Demo Dan download nya rapi,Sebaiknya gunakan Tekan "Enter" Untuk baris baru Di setelan entri>>pilihan.
Untuk membuat tombol nya,berikan code dibawah.Letakan pada Posting HTML.
<div id="wrap">
<a href="#" class="btn-slide">
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2">
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Note:Warna merah ganti sesuai keinginan anda ,Warna biru ganti dengan link anda


Ok gampang kan,Jangan lupa comment ya.