CARA MEMBUAT TOMBOL DEMO DENGAN CSS

Selamat pagi....., masih bersama Blog Alvin Warasi, pada kesempatan ini saya akan berbagi kepada Anda tentang Cara Membuat Tombol Demo Dengan CSS. Tombol demo ini biasa digunakan pada artikel blog yang memberikan demo atau contoh pada pengunjung blognya, dimana bentuk tombolnya berbentuk tombol button lumayan penting guna memberikan tampilan pada blog Anda, yang mana kesempatan dulu saya sempat membahas juga tentang Cara Modifikasi Tag Blockquote dengan CSS. Cara membuat tombol demo ini sangat sederhana sekali, jika Anda minat untuk membuat dan menerapkannya di blog/website bisa Anda ikuti tutorial di bawah ini

1. Seperti biasa login dulu akun blogger Anda
2. Pilih Template Edit HTML, kemudian centang Expand Widget Template
3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini 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 Anda gunakan kode-kode di bawah.

DEMO

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

DEMO

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

DEMO

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

DEMO

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

DEMO

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

DEMO

<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 Cara Membuat Tombol Demo Dengan CSS semoga dapat sedikit membantu buat Anda semua.

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250