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

Share this article :

Share on FB Submit to Digg Tweet Share on G+

Artikel Yang Berhubungan