Custom Button dengan CSS3

Lagi jalan-jalan di dunia maya mau nyari alamat rumah, eh gak taunya sesat alias nyasar. Bingung gak tau mau nyari dimana ni alamat, kok google gak tau ya...atau googlenya lupa...hehehe...

Akhirnya sudah hampir 1 jam mutar-mutar gak berarah, kalau searah jarum jam masih meding ada arahnya, tapi pusing juga kali ya...hahaha...kok ngaur ceritanya, sebenarya ne admin blog mau ngapain ya...hahahah...

Jadi gini, sudah berputar-putar akhirnya, nemu sebuah rumah tapi entah rumah siapa di situ tertulis alamatnya http://sin1aja.blogspot.com. Dan ternyata di dalam isi rumahnya ada yang menarik perhatian saya nih.. Disitu tertulis Kumpulan Button Keren CSS3. Saya coba lihat, ternyata keren juga ne untuk di letakkan dirumah saya alias blog saya...hehe...

Oke, sekarang saya sudah sampai di rumah alias blog saya, gak tau tiba-tiba sudah di rumah aja..(jangan-jangan yang tadi itu mimpi...hehehe).

Waktunya sekarang saya meletakkan apa yang saya dapati tadi di blog ini.
Langsung aja ya.. Berikut screenshot buttonnya:

Source: http://css3framework.co.uk/

Keren ga? Untuk demo klik disini
Sekarang pertanyaannya gimana caranya menerapkan di blog?

Oke, pertama anda login ke akun blogger anda.
Masuk ke rancangan » edit HTML, centang "Expand Template Widget"
Setelah itu, cari kode ]]></b:skin>  copy kode berikut letakan diatasnya:

.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(http://1.bp.blogspot.com/-IRgF3zcE1pw/TzNfv6Rf1BI/AAAAAAAAAt4/qvYggECFaFg/s1600/up+green.png)
    }
.heart:before {
    content: url(http://2.bp.blogspot.com/-MftUmRvgHHU/TzNfrrHD6_I/AAAAAAAAAto/WIj8X1Qyez4/s1600/heart.png)
    }
.star:before {
    content: url(http://2.bp.blogspot.com/-KOSLz9PO31c/TzNfuMCojZI/AAAAAAAAAtw/txajqb9tuVA/s1600/star.png)
}

Sekarang tinggal penerapannya di postingan anda, caranya:
Pada saat anda membuat entri baru pilih yang edit HTMLnya, jangan yang compose.
Masukan kode html dibawah ini

<a href="url anda" class="button big">Button Besar</a>

Perhatikan tulisan yang berwarna merah, tulisan big bisa anda ganti dengan tulisan berikut:

1. big ( button besar )
2. small ( button kecil )
3. blue ( button biru )
4. red ( button merah )
5. green ( button hijau )
6. orange ( button oren )
7. purple ( button ungu )
8. disabled ( button disable )
9. star ( button bintang )
10. heart ( button love )
11. arrow ( button download )
12. gray ( button hitam )

Sedangkan tulisan yang berwarna biru, anda bisa merubahanya sesuai selera anda.
Sekian pengalam yang saya dapat, berawal dari sesat di jalan, eh gak taunya dapat yang ginian..lumayankan untuk sekedar pengetahuan.