استایل و کد ایجاد دکمه در قالب وبلاگ


برای ایجاد دکمه لینک‌دار کافی ست ابتدا استایل زیر را در تگ هد قالب وبلاگ داشته باشیم:
<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 نمایش دهیم:
<span class="btn">
<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>
امیدوارم این کد و آموزش براتون مفید و کاربردی باشه...

#استایل دکمه
نظر دهید
کد امنیتی رفرش
یکشنبه 02 مهر 1402
پیوندهای روزانه
شیک‌بلاگ
تعداد مطالب: 5 پُست تعداد نظـرات: 8 نظر تعداد بازدید: 29,778 بار

www.TaleshBlog.ir
تالش‌بلاگ، دریچه‌ای بسوی تالش


© chicblog
 قالب‌ واکنشگرای شیکـ