Tombol Slide DEMO dan DOWNLOAD dengan CSS

Tombol Slide DEMO dan DOWNLOAD dengan CSS - Button Demo dan download yang akan saya bagikan ini sangatlah simple, ringan, elegant hanya menggunakan Css saja sehingga tidak mempengaruhi beban loading blog. Dalam tombol demo dan download pastinya memiliki fungsi yang sama namun memiliki style atau tampilan yang berbeda-beda, efek slide akan mucul ketika cursor berada di tulisan Download.

Screenshoot

Sangat berguna untuk kita semua yang bermain di dunia blogger, karena dengan adanya tombol ini akan membuat pengunjung blog kita lebih senang untuk berkunjung kembali di blog kita, apalagi jika web/blog kita bertopik tentang Tutorial dan Download.

Berikut ini tutorwidget akan membagikan tutorial blog mengenai bagaimana cara membuat tombol download dan demo dengan efek silde. Arahkan cursor anda di bawah ini.

DOWNLOAD

• DEMO
• DOWNLOAD

 Cara Membuat Tombol Demo dan Download
1. Masuk ke akun blogger anda
2. Pilih menu Template dan pilih Edit HTML
3. Masukkan CSS berikut tepat diatas kode ]]></b:skin> atau </style>

/* CSS Slide Demo and Download Button */
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:18px;line-height:50px;margin:0;
padding:0;width:100%;background:#e25734;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h1{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;border-radius:3px 3px 6px 6px;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:16px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#c34c2e;color:#fff;}
.download-info{background:#2A9F40;}
.download-info h1{background-color:#444;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:18px;line-height:50px;margin:0;
padding:0;width:100%;background:#444;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;border-bottom:3px solid #c34c2e;border-radius:3px 3px 6px 6px;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:16px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#e25734;color:#fff;}
.demo-info{background:#333;}
.demo-info h1{background-color:#cb4f30;}

4. Edit dan sesuaikan kode diatas untuk tampilan yang sobat inginkan. (Lewati Jika Sudah Pas)
5. Simpan template anda.
6. Cara Pemanggilan kodenya pada postingan , masukkan kode berikut pada postingan anda dengan mode edit HTML.

    <div class="download download-info">
    <h1> DOWNLOAD </h1>
    <ul>
    <li><a href="http://tutorwidget.blogspot.com" target="_blank"> DEMO </a></li>
    <li><a href="http://tutorwidget.blogspot.com" target="_blank"> DOWNLOAD </a></li>
    </ul>
    </div>

• NOTE :

          Ganti Link Warna Merah untuk link Demo.
          Ganti Link Warna Biru untuk link Download.

 7. Simpan postingan anda dan lihat hasilnya pada blog anda.