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

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


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

#استایل دکمه
نظر دهید
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی
دوشنبه 12 خرداد 1399
پیوندهای روزانه
شیک‌بلاگ
تعداد مطالب: 5 پُست تعداد نظـرات: 8 نظر تعداد بازدید: 6,764 بار

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


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