خانهآموزش وردپرسساخت دکمه با هاور افکت جذاب و تعاملی موج
https://rayawp.ir/?p=18756

ساخت دکمه با هاور افکت جذاب و تعاملی موج

سلام رفیق! 👋 تو این آموزش قراره یه دکمه تعاملی فوق‌العاده خفن بسازیم که وقتی روی قسمت مشخصی از دکمه کلیک می‌کنی، یه افکت موجی جذاب و حرفه‌ای از همونجا ظاهر میشه! 🌊🤩 این افکت

سلام رفیق! 👋 تو این آموزش قراره یه دکمه تعاملی فوق‌العاده خفن بسازیم که وقتی روی قسمت مشخصی از دکمه کلیک می‌کنی، یه افکت موجی جذاب و حرفه‌ای از همونجا ظاهر میشه! 🌊🤩 این افکت نه‌تنها ظاهر سایتت رو چشم‌نواز می‌کنه، بلکه حس مدرن بودن رو به کاربر منتقل می‌کنه. همه این جادوها رو با ویجت دکمه المنتور انجام می‌دیم! اگه دنبال یه روش خلاقانه برای زیباتر کردن سایتت هستی، تا آخر این آموزش با من همراه باش. 🚀✨

چرا افکت موج؟ (Ripple Effect)🤔

افکت موجی یا Ripple Effect یکی از تکنیک‌های جذابه که باعث میشه سایت حس پویایی و تعامل بیشتری به کاربر بده. این افکت زمانی که روی دکمه کلیک به کار میره، مثل یه موج کوچیک از محل کلیک پخش میشه و تجربه کاربری رو به سطح جدیدی می‌بره.

مراحل ساخت دکمه با هاور افکت موج 🌊

خب، بریم سراغ اصل ماجرا! قراره با چند مرحله ساده، یه دکمه بسازیم که وقتی روش کلیک می‌کنی، مثل یه موج تو دریا، افکت جذابش پخش بشه. نگران نباش، کار سختی نیست و تا آخرش کنارت هستم. 💪

توجه! این هاور افکت ریپل، زمین تا آسمون با هاور افکت‌های معمولی فرق داره! 😎✨ این‌جوریه که کاربر هرجا روی دکمه کلیک کنه، دقیقاً از همون نقطه یه موج شفاف و جذاب روی کل دکمه پخش میشه. 🌊👌 انگار دکمه با کاربر حرف می‌زنه و حس تعاملی بیشتری میده. خیلی شیک و حرفه‌ای، نه؟ 🔥🚀

1. اضافه کردن ویجت دکمه به صفحه 🔘

اولین قدم اینه که وارد صفحه‌ساز المنتور بشی و ویجت دکمه رو به صفحه‌ات اضافه کنی. برای اسم دکمه، یه عنوان جذاب و مرتبط انتخاب کن؛ مثل “کلیک کن” یا “ثبت‌نام” که هم کاربر رو ترغیب کنه، هم کاربرد دکمه رو مشخص کنه.

نمایش تبلیغات در نوشته های وردپرس بدون نصب افزونه
نمایش تبلیغات در نوشته های وردپرس بدون نصب افزونه

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

2. تنظیمات اولیه دکمه ⚙️

حالا که دکمه رو اضافه کردی، وقتشه با استفاده از تنظیمات ویجت، اونو به دلخواه خودت شخصی‌سازی کنی:

  • متن دکمه: تغییرش بده و یه متن جذاب و کاربرپسند انتخاب کن.
  • استایل دکمه: رنگ پس‌زمینه، رنگ متن، و حتی فونت رو تغییر بده تا با طراحی کلی سایتت هماهنگ باشه.
  • لینک: دکمه رو به صفحه‌ای که می‌خوای کاربر هدایت بشه متصل کن.
  • آیکون: اگه دوست داری، یه آیکون جذاب به دکمه اضافه کن تا بیشتر جلب توجه کنه.
  • کلاس CSS: یه کلاس سفارشی تعریف کن تا بعداً بتونی افکت موج رو بهش اضافه کنی. مثلاً اسم کلاس رو بذار: RayaWp-btn.

با این کارها، دکمه‌ات آماده یه تغییر خفن و حرفه‌ای میشه!

3. اضافه کردن CSS سفارشی 🎨

حالا وقتشه که هاور افکت موج رو با CSS اضافه کنیم. به قسمت تنظیمات پیشرفته ویجت دکمه > CSS سفارشی برو کد زیر رو وارد کن:

نصب گواهینامه SSL در cPanel مثل آب خوردن! (آموزش تصویری)
نصب گواهینامه SSL در cPanel مثل آب خوردن! (آموزش تصویری)
  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

3. اضافه کردن کد جاوا اسکریپت 🧑‍💻

برای اینکه موقعیت دقیق کلیک کاربر رو شناسایی کنیم و افکت ریپل از همون نقطه آغاز بشه، باید کد جاوا اسکریپت زیر رو به دکمه اضافه کنیم. برای این کار، کافیه کد زیر رو در یک ویجت HTML بعد از ویجت دکمه قرار بدی:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

فایل نهایی و JSON دکمه با هاور افکت ریپل رو می‌تونید از قسمت زیر دانلود کنید👇🎉این فایل رو میتونید به راحتی توی المنتور درون ریزی کنید 🙂

دانلود فقط برای اعضا ( کلیک کنید)

برای دانلود وارد حساب کاربری خود شوید یا ثبت نام کنید. کمتر از یک دقیقه زمان میبره 🙂

کار تمومه! 🎉 حالا یه دکمه با هاور افکت جذاب و تعاملی داری که می‌تونه تجربه کاربری سایتتو خیلی بهتر کنه 🚀💻! اگر این هاور افکت رو دوست داشتی یا سوالی داشتی، حتما کامنت بذار و بگو نظرت چیه! ✍️😉 این افکت رو توی دکمه‌های شیشه‌ای ربات‌های تلگرام هم میتونی ببینی! 💬🤖

5/5 - (3 امتیاز)

تعداد بازدید پست ها در وردپرس رو بدون افزونه نمایش بده!
تعداد بازدید پست ها در وردپرس رو بدون افزونه نمایش بده!

اگه از مطالب سایت استفاده کردی و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک بهمون انگیزه بدی تا با قدرت کار تولید محتوای خفن تر و جذاب تر رو پیش ببریم 😉🥰

ارسال نظر ( 0 نظر تایید شده )

نظرات پس از رویت و تایید مدیران نمایش داده می‌شود

📖 آنچه خواهید خواند

Toggle
    49 نفر در حال مطالعه این مقاله
    186 بازدید در 24 ساعت اخیر
    7 نفر این پست رو بوکمارک کردن
    5 دقیقه زمان مطالعه این مطلب
    ما رو در شبکه های اجتماعی دنبال کن 😉❤️
    سعید
    250 مقاله
    سعید

    عاشق یادگیری و پیشرفت در برنامه نویسی و ارتقا مهارت هام هستم. سعی میکنم دانش و تجربیات ارزشمندم رو در رایا وردپرس باهاتون به اشتراک بزارم :)

    بستن