Cara Mudah Memasang Tombol Demo dan Download Dengan Efek Slide

Hai Code-Share- Aduh... siang-siang terik kayak gini enaknya makan es dawet sharing tutorial ya sob, supaya hilang tuh yang namanya haus dan dahaga menambah ilmu sobat dan juga bisa diterapkan di blog sobat.

Oke! kembali ke notebook! kali ini berarus deras dan airnya sangat dingin saya, Fadilah Darajat, akan sharing tutorial Cara Mudah Memasang Tombol Demo dan Download Dengan Efek Slide sob. Bagi sobat bloger yang biasanya share tentang tutorial, tips blog, widget dan lain sebagainya, ataupun berbagi video, music, software, e-book ku sayang, dan lain-lainnya lah, pasti butuh fitur yang satu ini, yaitu tombol demo dan download. Tidak hanya stylish, elegan dan dinamis, fitur ini juga memiliki efek keren, yaitu efek slide. Kagak usah banyak omong lagi yah, pasti sobat juga penat bacanya kan? ini dia demonya.

Gimana sob? Minat? kalau sobat minat, langsung saja simak yang satu ini.
1. Sobat Login dulu ke akun blogger saya, eh maksud saya ke akun blogger sobat lah -_- (p)
2. Masuk ke Template => Edit HTML.
3. Cari kode  lalu pastekan kode ini dibawahnya.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

4. Masukkan kode CSS berikut di atas kode ]]>
 atau  sob.

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

#wrap br {
    display: none;
}

.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;
}

4. Lalu Simpan Template sob.
5. Untuk penerapannya, sobat masukkan kode (pemanggil) HTML berikut ke postingan, pada tab HTML, untuk tombol Demo.

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
</div>

6. Untuk penerapan tombol Download, sobat masukkan kode (pemanggil) HTML berikut ini, pada tab HTML.

<div id="wrap">
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Sudah dulu ya sob tutorial untuk Tombol Demo dan Download nya. Terimakasih banyak sudah mampir ke sini dan semoga langgeng bermanfaat ya... :)

Tweet