Make a Button With Image

Blog walking tidak menemukan artikel gaya punya harus jadi kreatif nih sob ;)) Muter-muter otak sampai mau butek dan pecah =)) Okelah para pengunjung setia blog Beben si bloglang ganteng kalem tea ini sudahkan membaca artikel variety button :-/ Lebih kurangnya menggunakan trik tersebut, mari kita membuat tombol (button) dengan variasi kata-kata yang mengikuti nanti didalam gambar tombolnya :-?? Sedikit bingung mungkin kalau diterangkan dengan kata-kata. Pada praktek saja agar bisa tergambar dengan seksama yah ;)) Secara default kita membutuhkan satu gambar dengan resolusi 214 x 118

Gambar tersebut bagian panah yg bawah kita beri warna merah, hijau, ataupun sesuai selera saja :) Mari kita coba dengan memberi warna merah yah sob ;) Misalanya seperti ini:

Letakan kode CSS berikut sebelum/diatas kode ]]></b:skin>

a.button {
display:block;
width:173px;
height:59px;
padding-right:50px;
line-height:60px;
font-family: Impact, Arial, sans-serif;
font-size:25px;
color:#FFFFFF;
text-align:center;
text-transform: uppercase;
background:url(http://image-gambar-214x118.jpg) no-repeat top center;
text-decoration:none;
}
a.button:hover {
background-position:bottom center;
color:#FF0000;
}

Ketika akan memosting, sobat hanya tinggal menuliskan syntax link menjadi

<a class="button" title="your title" href="http://your-link.com">Your Words</a>

Sobat perhatikan pada kode CSS yg diberi huruf tebal, nah itu yg perlu diselaraskan dengan gambar sobat ciptakan ;) Serta kata Your Words didalam syntax link itu nanti yg akan tampak pada gambar, dan disorot kode warna pada CSS yg berfungsi sesuai dg warna gambar kreasi sobat.
Happy blogging and salam blogger \m/