برای ایجاد دکمه لینکدار کافی ست ابتدا استایل زیر را در تگ هد قالب وبلاگ داشته باشیم:
#استایل دکمه
<style>
.btn{text-align:center;display:block;height:25px;line-height:20px;padding:3px}
.btn a{font-family:'times new roman',times,serif;font-size:15px;font-weight:bold;color:#f9f9f9;text-decoration:none;padding:3px;background-color:#003366;border:1px solid #000000}
.btn a:hover{color:#FFFFFF;text-decoration:none;background-color:#999999}
</style>
سپس در جای مورد نظر می توانیم لینکها را با تعریف کلاس مربوطه برای تگ span نمایش دهیم:.btn{text-align:center;display:block;height:25px;line-height:20px;padding:3px}
.btn a{font-family:'times new roman',times,serif;font-size:15px;font-weight:bold;color:#f9f9f9;text-decoration:none;padding:3px;background-color:#003366;border:1px solid #000000}
.btn a:hover{color:#FFFFFF;text-decoration:none;background-color:#999999}
</style>
<span class="btn">
<a href="/">لینک یک</a>
<a href="/m">لینک دو</a>
<a href="/posts">لینک سه</a>
</span>
در صورت تمایل میتوان ویژگی های ظاهری دکمه ها را مانند رنگ زمینه، شکل، رنگ قلم و... تغییر داد. برای نمونه به این استایل که باعث گرد شدن چهارگوشه دکمه می شود توجه کنید:<a href="/">لینک یک</a>
<a href="/m">لینک دو</a>
<a href="/posts">لینک سه</a>
</span>
<style>
.btn{text-align:center;display:block;height:25px;line-height:20px;padding:3px}
.btn a{font-family:'times new roman',times,serif;font-size:15px;font-weight:bold;color:#f9f9f9;text-decoration:none;padding:3px;background-color:#003366;border:1px solid #000000}
.btn a:hover{color:#FFFFFF;text-decoration:none;background-color:#999999}
.btn a{
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
-khtml-border-radius:5px;
}
</style>
.btn{text-align:center;display:block;height:25px;line-height:20px;padding:3px}
.btn a{font-family:'times new roman',times,serif;font-size:15px;font-weight:bold;color:#f9f9f9;text-decoration:none;padding:3px;background-color:#003366;border:1px solid #000000}
.btn a:hover{color:#FFFFFF;text-decoration:none;background-color:#999999}
.btn a{
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
-khtml-border-radius:5px;
}
</style>
امیدوارم این کد و آموزش براتون مفید و کاربردی باشه...
#استایل دکمه