ساخت هاور افکت ترسیم خطوط حاشیه دکمه یا باکس در المنتور

😀 این بار رفتیم سراغ سایت کارلنسر و هاور افکت جذاب دکمه‌های مگامنوش رو طراحی کردیم! این افکت رو می‌تونی برای دکمه‌ها، باکس‌ها و حتی سایر المان‌های سایتت استفاده کنی.

✨ تا حالا شده بخوای موقع هاور کردن روی دکمه‌ها یا باکس‌ها، یه خط زیبا و انیمیشنی دورشون کشیده بشه؟ 🤔 این افکت که بهش “Border Drawing Animation” یا “ترسیم خطوط حاشیه” می‌گن، یکی از محبوب‌ترین تکنیک‌های طراحی وبه که حس تعاملی بهتری به سایت می‌ده و کاربر رو جذب می‌کنه.

💡 تو این آموزش، قراره این افکت شیک و حرفه‌ای رو با استفاده از ویجت آیکون باکس در المنتور بسازیم.

نحوه ساخت این هاور افکت در المنتور

مرحله ۱: اضافه کردن ویجت آیکون باکس به برگه

• ابتدا وارد ویرایشگر المنتور شو و یک ویجت آیکون باکس به صفحه‌ات اضافه کن. این کار رو می‌تونی با کشیدن ویجت از پنل سمت راست به فضای طراحی انجام بدی.

مرحله ۲: افزودن CSS سفارشی

حالا باید کد CSS زیر رو به سایتت اضافه کنی. برای این کار، وارد تب پیشرفته در ویجت آیکون باکس بشو و به المان موردنظر کلاس “RayaWp-newline” رو اختصاص بده. سپس کدهای CSS رو در بخش Custom CSS وارد کن تا افکت به درستی اعمال بشه. 🚀

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

مرحله ۳: افزودن کد JavaScript

حالا باید کد جاوااسکریپت زیر رو به سایتت اضافه کنی. برای این کار، می‌تونی از ویجت «HTML» در المنتور استفاده کنی. کافیه یه ویجت HTML رو درست زیر ویجت آیکون باکس اضافه کنی و کدهای جاوااسکریپت رو داخلش قرار بدی:

 ____                   __        __       
|  _ \ __ _ _   _  __ _ \ \      / / __  
| |_) / _` | | | |/ _` | \ \ /\ / / '_ \ 
|  _ < (_| | |_| | (_| |  \ V  V /| |_) |
|_| \_\__,_|\__, |\__,_|   \_/\_/ | .__/ 
            |___/                 |_|    

نتیجه‌ گیری 🎉

تو این مقاله یاد گرفتی چطور با استفاده از المنتور و ویجت آیکون باکس افکت ترسیم خطوط حاشیه رو به سایتت اضافه کنی. این افکت نه تنها ظاهر المان‌ها رو بهبود می‌ده بلکه تجربه کاربری جذاب‌تری رو هم فراهم می‌کنه. حالا وقتشه که خودت این کدها رو امتحان کنی و تغییرات دلخواهت رو اعمال کنی. موفق باشی و از طراحی سایت لذت ببر! 🚀