Koleksi Cara Membuat Button Cantik....

Koleksi Button/Tombol pada website, yang dapat anda buat sendiri Berikut kodenya CSS-nya: Taruh diatas kode ]]></b:skin> .bu...

Koleksi Button/Tombol pada website, yang dapat anda buat sendiri

Berikut kodenya CSS-nya:
Taruh diatas kode ]]></b:skin>

.button { display: inline-block; height: 27px; border: 2px solid #333; outline: 0; margin: 4px 6px; padding-left: 16px; padding-right: 16px; font-size: 13px; line-height: 27px; text-shadow: 1px 1px 1px #FFF; text-align: center; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5); -moz-box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5); box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5); background-color: #e0e0e0; background-image: -webkit-linear-gradient(top, #f7edff, #b1b1b1); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7edff), color-stop(1, #b1b1b1)); background-image: -moz-linear-gradient(top, #f7edff, #b1b1b1); background-image: -o-linear-gradient(top, #f7edff, #b1b1b1); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f7edff, EndColorStr=#b1b1b1)"; background-image: linear-gradient(top, #f7edff, #b1b1b1); -webkit-background-clip: padding; background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box } .button:link, .button:visited, .button:hover { color: #444; text-decoration: none } .button:hover, .button:focus { background-image: -webkit-linear-gradient(top, #f5f5ff, #999); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5ff), color-stop(1, #999)); background-image: -moz-linear-gradient(top, #f5f5ff, #999); background-image: -o-linear-gradient(top, #f5f5ff, #999); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5ff, EndColorStr=#999)"; background-image: linear-gradient(top, #f5f5ff, #999); } .button:active { position: relative; top: 1px; -webkit-box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5); -moz-box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5); box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5) } .big { font-size: 17px; height: 38px; line-height: 38px; padding-left: 23px; padding-right: 23px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px } .small { font-size: 11px; height: 20px; line-height: 20px; border: 1px solid #333; padding-left: 8px; padding-right: 8px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px } .disabled { border-color: #CCC; background: #e0e0e0; color: #CCC; cursor: default; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.7; -ms-filter: "alpha(opacity=70)"; filter: alpha(opacity=70) } .disabled:hover, .disabled:active, .disabled:focus { top: 0; background: #e0e0e0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none } .blue:link, .blue:visited, .red:link, .red:visited, .green:link, .green:visited, .orange:link, .orange:visited, .purple:link, .purple:visited, .black:link, .black:visited { color: #FFF; font-weight: bold; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6) } .blue { border-color: #003b80; background-color: #004ca3; background-image: -webkit-linear-gradient(top, #006ce8, #004ca3); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #004ca3)); background-image: -moz-linear-gradient(top, #006ce8, #004ca3); background-image: -o-linear-gradient(top, #006ce8, #004ca3); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#004ca3)"; background-image: linear-gradient(top, #006ce8, #004ca3); } .blue:hover, .blue:focus { background-color: #003b80; background-image: -webkit-linear-gradient(top, #006ce8, #003b80); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #003b80)); background-image: -moz-linear-gradient(top, #006ce8, #003b80); background-image: -o-linear-gradient(top, #006ce8, #003b80); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#003b80)"; background-image: linear-gradient(top, #006ce8, #003b80); } .red { border-color: #b50000; background-color: #d00000; background-image: -webkit-linear-gradient(top, #F33, #d00000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #d00000)); background-image: -moz-linear-gradient(top, #F33, #d00000); background-image: -o-linear-gradient(top, #F33, #d00000); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#d00000)"; background-image: linear-gradient(top, #F33, #d00000); } .red:hover, .red:focus { background-color: #b50000; background-image: -webkit-linear-gradient(top, #F33, #b50000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #b50000)); background-image: -moz-linear-gradient(top, #F33, #b50000); background-image: -o-linear-gradient(top, #F33, #b50000); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#b50000)"; background-image: linear-gradient(top, #F33, #b50000); } .green { border-color: #279100; background-color: #2ead00; background-image: -webkit-linear-gradient(top, #3fed00, #2ead00); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #2ead00)); background-image: -moz-linear-gradient(top, #3fed00, #2ead00); background-image: -o-linear-gradient(top, #3fed00, #2ead00); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#2ead00)"; background-image: linear-gradient(top, #3fed00, #2ead00); } .green:hover, .green:focus { background-color: #279100; background-image: -webkit-linear-gradient(top, #3fed00, #279100); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #279100)); background-image: -moz-linear-gradient(top, #3fed00, #279100); background-image: -o-linear-gradient(top, #3fed00, #279100); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#279100)"; background-image: linear-gradient(top, #3fed00, #279100); } .orange { border-color: #da7c0c; background-color: #faa51a; background-image: -webkit-linear-gradient(top, #faa51a, #f47a20); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #f47a20)); background-image: -moz-linear-gradient(top, #faa51a, #f47a20); background-image: -o-linear-gradient(top, #faa51a, #f47a20); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#f47a20)"; background-image: linear-gradient(top, #faa51a, #f47a20); } .orange:hover, .orange:focus { background-color: #da7c0c; background-image: -webkit-linear-gradient(top, #faa51a, #da7c0c); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #da7c0c)); background-image: -moz-linear-gradient(top, #faa51a, #da7c0c); background-image: -o-linear-gradient(top, #faa51a, #da7c0c); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#da7c0c)"; background-image: linear-gradient(top, #faa51a, #da7c0c); } .purple { border-color: #609; background-color: #ca00d1; background-image: -webkit-linear-gradient(top, #ca00d1, #aa00b0); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #aa00b0)); background-image: -moz-linear-gradient(top, #ca00d1, #aa00b0); background-image: -o-linear-gradient(top, #ca00d1, #aa00b0); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#aa00b0)"; background-image: linear-gradient(top, #ca00d1, #aa00b0); } .purple:hover, .purple:focus { background-color: #609; background-image: -webkit-linear-gradient(top, #ca00d1, #609); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #609)); background-image: -moz-linear-gradient(top, #ca00d1, #609); background-image: -o-linear-gradient(top, #ca00d1, #609); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#609)"; background-image: linear-gradient(top, #ca00d1, #609); } .black { border-color: #000; background-color: #333; background-image: -webkit-linear-gradient(top, #666, #333); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #333)); background-image: -moz-linear-gradient(top, #666, #333); background-image: -o-linear-gradient(top, #666, #333); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#333)"; background-image: linear-gradient(top, #666, #333); } .black:hover, .black:focus { background-color: #000; background-image: -webkit-linear-gradient(top, #666, #000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000)); background-image: -moz-linear-gradient(top, #666, #000); background-image: -o-linear-gradient(top, #666, #000); filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#000)"; background-image: linear-gradient(top, #666, #000); } .arrow, .heart, .star { padding-left: 12px } .arrow:before, .heart:before, .star:before { padding-right: 5px; vertical-align: -15% } .arrow:before { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNfyZ7I9NgT9hwQZbtN6PHDseSgxslSmguG5Lnz3AqYBLU9xtConjiMmrmBJ7jril4T0TYplS7XKZMLABfsC2IqVGYF7s5J-ZSkLu8SPvFo54rJEudtc2zJBOryWvIeZzExM6H/s1600/up+green.png) } .heart:before { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAw-wpy5m6PWqpXRwJZiZANceShI3PlJ-NS1Jx5xvisDkhLEg0qv0XwNaZwg2kljf5nEyTvs69JA4QO3nrnN1SeO91AVfD4XSybWhAeT3w5My47La7VxdtKJ3vYJ8H2wMc53kj/s1600/heart.png) } .star:before { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezOa1E9QQfuK18pUeMp5g_NtE8PdhJq-Eb1tIFu_7sysUfWR713MTrXYyzR9EpKpYueKDEVXu4flH9kKahqlRrOHvmj4-SF9eTbNxJBpPO38zSnVbUygtBuhUF3_mHlfD5z3B/s1600/star.png) }

Taruh di Gadget Html/javascript pada halaman Layout :

<a href="http://blog-tujuan.blogspot.com" class="button big">Button Besar</a>

Class "button big" diatas bisa diganti model-modelnya sesuai kenginan :

big ( button besar )
small ( button kecil )
blue ( button biru )
red ( button merah )
green ( button hijau )
orange ( button oren )
purple ( button ungu )
disabled ( button disable )
star ( button bintang )
heart ( button love )
arrow ( button download )
gray ( button hitam )