Button Cantik dengan CSS3

Kali ini saya akan share cara membuat button cantik menggunakan css3. Button ini terdiri dari beberapa mempunyai warna menarik, sehingga bisa digunakan untuk navigasi atau button link download. Kelebihan lainnya, button dari papermashup.com ini juga mempunyai efek hover, sehingga menambah atraktif penampilannya. Sekarang mari kita bahas cara membuat button cantik dengan css3. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

.button, .button:visited{ background:#222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;  display:inline-block;  padding:5px 10px 6px;  color:#fff;  text-decoration:none;  -moz-border-radius:6px;  -webkit-border-radius:6px;  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.6);  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.6);  text-shadow:0 -1px 1px rgba(0,0,0,0.25);  border-bottom:1px solid rgba(0,0,0,0.25);  position:relative;  cursor:pointer;  font-family:calibri}
.button:hover{ background-color:#111;  color:#fff}
.button:active{ top:1px}
.small.button, .small.button:visited{ font-size:11px}
.button, .button:visited,
.medium.button, .medium.button:visited{ font-size:13px;  font-weight:bold;  line-height:1;  text-shadow:0 -1px 1px rgba(0,0,0,0.25)}
.medium.button, .medium.button:visited{ font-size:14px;  padding:8px 14px 9px}
.large.button, .large.button:visited{ font-size:34px;  padding:8px 14px 9px}
.pink.button, .magenta.button:visited{ background-color:#e22092}
.pink.button:hover{ background-color:#c81e82}
.green.button, .green.button:visited{ background-color:#91bd09}
.green.button:hover{ background-color:#749a02}
.red.button, .red.button:visited{ background-color:#e62727}
.red.button:hover{ background-color:#cf2525}
.orange.button, .orange.button:visited{ background-color:#ff5c00}
.orange.button:hover{ background-color:#d45500}
.blue.button, .blue.button:visited{ background-color:#2981e4}
.blue.button:hover{ background-color:#2575cf}
.yellow.button, .yellow.button:visited{ background-color:#ffb515}
.yellow.button:hover{ background-color:#fc9200}

Klik Simpan Template
Selanjutnya bila ingin menampilkan button pada artikel, gunakan script berikut.

BUTTON BESAR
<center><a href="LINK ANDA DI SINI" class="large button pink" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="large button blue" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="large button green" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="large button orange" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="large button red" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="large button yellow" >TEKS/ JUDUL DI SINI</a></center>

BUTTON SEDANG
<center><a href="LINK ANDA DI SINI" class="medium button pink" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="medium button blue" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="medium button green" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="medium button orange" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="medium button red" >TEKS/ JUDUL DI SINI</a></center>
<center><a href="LINK ANDA DI SINI" class="medium button yellow" >TEKS/ JUDUL DI SINI</a></center>

Ok selamat mencoba dan sukses selalu

"keep spirits and do the best"