Cara Membuat Tombol Download Dan Demo Dengan CSS

Assalamualaikum......,masih sama hansmjlkcommunity,pada kesempatan ini saya akan coba membuat artikel tentang Cara Membuat Tombol Download Dan Demo Dengan CSS,ya dari pada saya bengong mending bikin artikel siapa tau buat sobat ada yang minat memakai tombol button made in hansmjlkcommunity.....hehehehhe.tombol button lumayan penting guna memberikan tampilan pada blog sobat,yang mana pada kesempatan dulu saya sempat membahas juga tentang
Expandable Button CSS For Blog,masih ada kaitannya dengan artikel kali ini,nmaun siapa tau sobat ada yang minat dengan tampilan button kali ini.
Bagi sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini

1. Sepeti biasa login dulu ke akun blog sobat.
2. Pilih Template > Edit HTML,kemudian centang Expand Widget Templates
3. Cari kode [[></b:skin> dan letakan kode di bawah tepat di atas kode ]]></b:skin>

.SRB{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.SRB a { color: #fff; 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); }

.SRB 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%); }

.SRB 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%); }

.SRB 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%); }

.SRB 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%); }

.SRB 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%); }

.SRB 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%); }

.SRB a:hover, .SRB:hover { color: #fff; opacity: .7 }

4. Kemudian save.


Untuk penggunaan dalam postingan bisa sobat gunakan kode kode di bawah.

Button Text

<span class="SRB"><a class="green" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="orange" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="red" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="gray" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="dark" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Button Text

<span class="SRB"><a class="blue" href="#" rel="nofollow" target="_blank"> Button Text </a></span>

Keterangan :

Untuk tulisan berwarna merah menunjukan tempat URL
Untuk tulisan berwarna hijau menunjukan nama button


Selesai sudah tutorial kali ini terima kasih atas partisipasinya semoga dapat sedikit membantu buat sobat semuanya.



WARNING !!!!! WarningJangan lupa komentarnya ya sob,kalo ada masalah silahkan hubungi saya By hansmjlkcommunity.blogspot.com