طراحی دکمه جذاب با المنتور

یکی از مهم ترین کارها در طراحی سایت، طراحی دکمه هاست! هرچقدر دکمه‌ها جذاب تر طراحی بشن، احتمال کلیک کردن روی اون دکمه ها و میزان بازدید سایت بیشتر میشه.  تو این پست یاد میگیریم که خیلی راحت با المنتور و مقداری کدنویسی css یک نمونه دکمه جذاب برای سایت خودمون طراحی کنیم. با من همراه باشید 🙂

آنچه در این مقاله میخوانید:

• باز کردن برگه با ویرایشگر المنتور
• افزودن ویجت دکمه المنتور
• انجام تنظیمات دکمه
• استایل دهی به دکمه المنتور
• کدنویسی css برای دکمه المنتور

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

در ابتدا برگه مورد نظر خودمون رو با ویرایشگر المنتور باز میکنیم. برای اینکه یه صفحه کاملا سفید داشته باشیم، میتونیم طبق تصویر زیر از بخش تنظیمات صفحه، گزینه طرح بندی را روی حالت canvas قرار بدیم، عنوان رو هم مخفی کنیم و سپس به طراحی دکمه خود می پردازیم.

افزودن ویجت دکمه المنتور

از بخش جستجوی ابزارک ها، عبارت دکمه یا button رو سرچ میکنیم و بعد با حرکت ماوس، این المان رو به داخل صفحه میکشیم.

انجام تنظیمات دکمه

حالا برای انجام تنظیمات دکمه، از تب محتوا طبق راهنمای زیر به ترتیب تنظیمات خودمون رو اعمال میکنیم:

1. از این قسمت متن مورد نظر خودمون رو برای نمایش در دکمه مینویسیم.
2. آدرس صفحه ای که میخوایم کاربر با کلیک کردن به اون صفحه منتقل بشه رو در این بخش وارد میکنیم.
3. از بخش چیدمان، تراز دکمه رو روی حالت وسط چین تنظیم میکنیم.
4. از این بخش وارد کتابخانه آیکن شده و با سرچ کردن کلمه left آیکن فلش سمت چپ رو انتخاب میکنیم.
5. برای بیشتر کردن فاصله آیکن از متن، از این بخش عدد 11 رو وارد میکنیم.

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

طبق راهنمای زیر وارد تب استایل شده و ظاهر دکمه خودمون رو سفارشی میکنیم:

1. با کلیک کردن روی آیکن مداد وارد بخش تایپوگرافی شده و از بخش خانواده فونت، فونت مورد نظر خودمون رو انتخاب میکنیم. (در این آموزش از فونت یکان بخ استفاده شده). همچنین اندازه فونت روی 17 پیکسل و وزن فونت هم روی عدد 500 قرار میدیم.
2. از این بخش میتونیم رنگ متن مورد نظر خودمون رو انتخاب کنیم. (در این آموزش از کد رنگ 0008C1 استفاده شده). همچنین رنگ پس زمینه دکمه رو کاملا شفاف یا رنگ سفید در نظر میگیریم. (کد رنگ سفید fff هست). سپس وارد تب هاور شده و رنگ متن رو در حالت هاور روی رنگ سفید قرار میدیم. دقت کنیدکه با رنگ پس زمینه در حالت هاور کاری نداریم!
3. حالا از این قسمت نوع کادر دور را روی حالت یکپارچه تنظیم و مقدار 1 پیکسل برای عرض انتخاب میکنیم. همچنین رنگ کادر دور رو انتخاب میکنیم ( برای رنگ کادر از همان کد رنگ متن استفاده میکنیم.) و برای اینکه گوشه های دکمه گرد نباشن انحنای مرز روی 0 میذاریم.
4. فاصله داخلی دکمه رو از بالا و پایین  20 پیکسل و از چپ و راست 50 پیکسل وارد میکنیم.

کدنویسی css برای دکمه المنتور

وارد تب پیشرفته دکمه خودمون میشیم و طبق راهنمای زیر عمل میکنیم:

1. از این بخش عرض دکمه را روی حالت در متن یا auto قرار میدهیم. ( دقت کنیدکه از تنظیمات ستون گزینه ترازبندی افقی روی وسط تنظیم شده باشه تا دکمهوسط صفحه قرار بگیره.)
2. برای اعمال کدهای css نیاز داریم که از این بخش یک class name انتخاب کنیم. (در این آموزش از اسم my-btn استفاده شده). شما میتونید به جای این اسم کلاس دلخواه خودتون رو وارد کنید.
3. کدهای css زیر رو کپی کرده و در بخش custum css قرار میدهیم. حالا برای دیدن افکت در حالت هاور ، ماوس را روی دکمه قرار بدهید تا افکت جذابی که اعمال شده رو ببینید 🙂

.my-btn .elementor-button::before{
    content:'';
    position: absolute;
    background:#0008C1;  /*رنگ پس زمینه دکمه*/
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;   /*جهت انیمیشن*/
    transition: transform .4s ease; /*سرعت انیمیشن*/
}

.my-btn .elementor-button:hover::before{
    transform: scaleX(1);
}

.my-btn .elementor-button-text{
    z-index: 1;
}

.my-btn:hover .elementor-button-icon{
    color: #fff; /* رنگ آیکن*/
    z-index: 1;
    transition: color .5s ease
}

.my-btn .elementor-button-icon{
    transform: scale(1.2); /* سایز آیکن */
}

نکته مهم: توجه کنید که برای فعال بودن custum css حتما نیاز هست که علاوه بر نسخه عادی المنتور، نسخه پرو المنتور هم روی سایت شما نصب و فعال باشه. همچنین اگه از اسم کلاس دیگه ای استفاده کرده اید باید در این کدها به جای اسم my-btn اسم مورد نظر خودتون رو جایگزین کنید.

راهنمای استفاده از کدهای بالا

برای اینکه راحت تر متوجه کدهای بالا بشید و بتونید استایل متفاوت خودتون رو داشته باشید، عبارت های فارسی در میان کدها قرار گرفته است. همچنین طبق راهنمای زیر میتونید تغییرات خودتون رو اعمال کنید:

• از بخش رنگ پس زمینه دکمه متیونین به جای 0008C1 کد رنگ دلخواه خودتون رو وارد کنید تا رنگ پس زمینه دکمه در حالت هاور به رنگ دلخواه شما تغییر کنه. (بهتره  این رنگ با رنگ متن دکمه و کادر دور یکسان باشه تا دکمه شما زیباتر دیده بشه.)

• از بخش جهت انیمیشن میتونین  مقدار right رو به left تغییر بدید تا جهت حرکت انیمیشن تغییر کنه.

• از بخش سرعت انیمیشن هم میتونین مقدار 4s رو کمتر یا بیشتر کنید تا سرعت انیمیشن سریعتر یا کند تر بشه.

• از بخش رنگ آیکن میتونین کد رنگ fff رو که رنگ سفید هست به رنگ دلخواه خودتون تغییر بدید تا در حالت هاور رنگ آیکن شما به این رنگ تغییر کنه.

• از بخش سایز آیکن هم میتونید مقدار داخل پرانتز scale(1.2)  رو کمتر یا بیشتر کنین تا سایز آیکن شما بزرگتر یا کوچکتر بشه. 

امیدوارم این پست برای شما مفید بوده باشه 🙂 هر نظر یا سوالی داشتین میتونین از بخش پایین صفحه کامنت بذارید تا پاسخگوی شما عزیزان باشم.