Cara Membuat Tombol Download Unik Dengan CSS

Haloo Sobat Blogger Bursa Info...Kali ini Admin ingin berbagi Tips cara membuat Tombol Download yang Keren , Artikel ini saya sertakan juga dengan DEMO ,dan saya rasa artikel ini bermanfaat buat sobat yang mempunyai blog berisi kontent share Software , Lagu , Ebook dan saya tidak tahu lg...heheh guyon dikit brow.

Oke langsung aja tips sebagai berikut :

1. Buka Tempalte HTML lalu cari Kode </head>
2. Copy Kode berikut ini dan  paste tepat di atas kode tadi
   
   <style>
    .bursa{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 3px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
   
   .bursa a { color: #FFFFFF; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
   
    .bursa a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
   
    .bursa a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
   
    .bursa a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
   
    .bursa a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
   
    .bursa a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
   
    .bursa a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
   
    .bursa a:hover{ color: #fff; border-color: #FFFF00; -moz-box-shadow: 0 0 8px #222; -webkit-box-shadow: 0 0 8px #222; box-shadow: 0 0 8px #222; -webkit-border-top-left-radius:13px; -moz-border-radius-topleft:13px; border-top-left-radius:13px; -webkit-border-top-right-radius:13px; -moz-border-radius-topright:13px; border-top-right-radius:13px; -webkit-border-bottom-right-radius:13px; -moz-border-radius-bottomright:13px; border-bottom-right-radius:13px; -webkit-border-bottom-left-radius:13px; -moz-border-radius-bottomleft:13px; border-bottom-left-radius:13px; text-indent:0; border:1px solid #eda933; display:inline-block; } </style>
   
   Lalu Save Template
3. Dan untuk  penulisannya pada artikel anda seperti biasa Buat entri/artikel baru
4. Pada area Postingan untuk menempatkan kode buka Mode HTML jangan Compose lihat di bawah ini serta Penampakan
   
   yang tampil pada tombol download ( red: Penampakan ) emank uji nyali...jadi serem juga...hahah just kidink plen
5. A.Penampakan :
   Download
   
   Kode :
   <div class="bursa"><a href="http://bursa-info.blogspot.com/" target="_blank" class="red">Download</a></div>
   
   
   B.Penampakan :
   Download
   
   Kode :
   <div class="bursa"><a href="http://bursa-info.blogspot.com/" target="_blank" class="orange">Download</a></div>
   
   
   C.Penampakan :
   Download
   
   Kode :
   <div class="bursa"><a href="http://bursa-info.blogspot.com/" target="_blank" class="green">Download</a></div>
   
   
   D.Penampakan :
   Download
   
   Kode :
   <div class="bursa"><a href="http://bursa-info.blogspot.com/" target="_blank" class="blue">Download</a></div>
   
   
   E.Penampakan :
   Download
   
   Kode :
   <div class="bursa"><a href="http://bursa-info.blogspot.com/" target="_blank" class="gray">Download</a></div>
   
   
   F.Penampakan :
   Download
   
   Kode :
   <div class="bursa"><a href="http://bursa-info.blogspot.com/" target="_blank" class="dark">Download</a></div>
   
   
   
6. Pilih tombol sesuai selera sobat lalu copy kodenya dan tempatkan pada area postingan..ingat dalam mode HTML...oiya Tulisan Download bisa di ganti sesuai selera sobat bebas koq

Semoga bermanfaat...dan salam Blogger