طراحی دکمه گرادینت در وودمارت

اگر برای طراحی سایت خودتون از قالب وودمارت استفاده می‌کنید حتما می‌دونید که این قالب امکان ساخت رنگ گرادینت برای دکمه رو نداره. فقط از بخش تنظیمات قالب> استایل و رنگ‌ها می‌تونید یه رنگ ساده (solid) انتخاب کنید. اما اگر بخواهید به یه دکمه یا هر عنصر دیگه رنگ گرادینت اضافه کنید، چه باید کرد؟ با ادامه مقاله همراه باشید.

طراحی دکمه گرادینت در قالب وودمارت

اول از همه باید عنصری که قصد دارید رنگ رو به گردینت تغییر بدید رو انتخاب کنید. برای اینکار روی اون دکمه کلیک راست کنید و inspect element رو بزنید. مثلا من قصد دارم که رنگ دکمه مربوط به بخش کامنت‌ها رو به gradient تغییر بدم.

طراحی دکمه گرادینت در وودمارت

توی قدم بعدی باید اسم کلاس مربوط به اون دکمه رو پیدا کنیم.

طراحی دکمه گرادینت در وودمارت

کلاسی که من باهاش کار دارم .comment-form .submit هست. حالا باید از داشبورد وردپرس برم سراغ تنظیمات قالب> استایل css سفارشی. توی این قسمت کافیه که فقط کد زیر رو وارد کنم تا رنگ مربوط به دکمه ثبت کامنت تمام صفحات به گرادینت تبدیل بشه:

.comment-form .submit {
background-image: linear-gradient(to left, blue, white);
}

به جای رنگ blue و white می‌تونید هر رنگ دیگه‌ای که دلخواه‌تون بود رو قرار بدید یا از کد رنگ مخصوصش استفاده کنید. من از پالت رنگ سایت خودم استفاده کردم و نتیجه به این شکل هست:

طراحی دکمه گرادینت در وودمارت

سایر خدمات: طراحی سایت در قم

اشتراک گذاری: 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه گرادینت در المنتور
خانه
وبلاگ