Membuat Tombol Demo dan Download Dengan Efek Slide

Written By PENDIDIDKAN Friday, October 24, 2014 Add Comment Edit

Membuat Tombol Demo dan Dowonload Dengan Efek Slide - membuat tombol demo dan download ini merupakan kali empat dalam postingan saya, seperi cara membuat link download otomatis, Cara Membuat Style Tombol Demo dan Download, Membuat CSS Tombol DEMO dengan Pseudo Elements, dan kali ini saya akan berbagi trik Membuat Tombol Demo dan Dowonload Dengan Efek Slide.

Dalam tombol demo dan download pastinya memiliki fungsi yang sama namu memiliki style atau tampilan yang berbeda-beda, ini dilakukan untuk mempercatik tampilan dipostingan agar tidak terlihat seperti tulisan demo dan dwonload biasa. Membuat Tombol Demo dan Dowonload Dengan Efek Slide ini menurut saya sangat menarik efek slide akan mucul ketika cursor berada di tulisan Download. apabila ingin melihat tombol slide anda bisa melihatnya disini

Bagi anda yang tertarik berikut ini cara Membuat Tombol Demo dan Dowonload Dengan Efek Slide :

1. Login keakun Blogger
2. Pilih Template => Edit HTML
3. Dengan menggunakan ctrl+f anda cari kode ]]></b:skin> atau </style>
4. Kemudian anda copy kode dibawah ini dan pastekan diatasnya

.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;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;}
.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:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info h1{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;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;}
.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:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h1{background-color:#fff;}

5. Simpan Template

6. Untuk menampilakan tombol demo dan download di postingan, anda buat New page/Laman Baru => pilih mode HTML => kemudian anda masukkan kode dibawah ini kedalm kontent yang tersedia

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

7. Anda publikasikan dan lihat hasilnya

Demikian Membuat Tombol Demo dan Dowonload Dengan Efek Slide Click, semoga bermanfaat!