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

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

سلام رفیق! 😎می‌خوای دکمه‌های سایتت خاص تر بشن و توجه کاربر بهشون جلب بشه؟ 🤩 یکی از بهترین راه‌ها اینه که افکت‌های باحال مثل افکت ریپل (Ripple Effect) رو به دکمه‌های سایتت اضافه کنی. این

سلام رفیق! 😎
می‌خوای دکمه‌های سایتت خاص تر بشن و توجه کاربر بهشون جلب بشه؟ 🤩 یکی از بهترین راه‌ها اینه که افکت‌های باحال مثل افکت ریپل (Ripple Effect) رو به دکمه‌های سایتت اضافه کنی. این افکت هم از نظر زیبایی خیلی جذابه و هم اینکه کاربر وقتی روش کلیک می‌کنه احساس بهتری می‌گیره. 👌

حالا ممکنه بپرسی چطور می‌تونیم این افکت رو به راحتی و بدون نیاز به کدنویسی اضافه کنیم؟ خب، با ابزار صفحه‌ساز المنتور که یکی از بهترین‌هاست، می‌تونی به سادگی این کار رو انجام بدی. در این مقاله قراره بهت یاد بدم چطور با استفاده از CSS و ویجت دکمه‌ی المنتور، افکت ریپل رو پیاده‌سازی کنی. 🖱️✨ پس با من تا انتهای این مقاله همراه باش 🙂

🚀مراحل ایجاد افکت ریپل روی دکمه در المنتور

  1. افزودن دکمه به صفحه با المنتور: اولین کار اینه که وارد صفحه‌ای بشی که می‌خوای دکمه رو توش بذاری. بعد که وارد ویرایشگر المنتور شدی، از پنل ابزارهای سمت راست، ویجت “Button” رو بکش و بنداز روی صفحه. حالا دکمه‌ت رو با هر متنی که می‌خوای سفارشی کن. 🤩رنگش رو تغییر بده، لینک بزار واسش، حتی می‌تونی آیکون بذاری، همه اینا به عهده خودت! چون خیلی ساده‌ست و بیشتر جنبه سلیقه‌ای داره. پس خلاق باش و هر چی که به ذهنت میاد رو امتحان کن! 😎🎨
  2. اضافه کردن کد CSS برای افکت ریپل: بعد از اینکه دکمه رو گذاشتی و هر تنظیماتی که لازم داشتی رو انجام دادی، باید به بخش CSS سفارشی ( در تب پیشرفته ویجت دکمه) بری و کدهای مربوط به افکت ریپل رو وارد کنی. این کدها باعث می‌شن که یه افکت و انیمیشن جذاب موج (Ripple Effect) روی دکمه ظاهر بشه.
/* Ripple Effect Button by RayaWp.ir */
.RayaWp-Rl a {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.RayaWp-Rl {
    overflow: hidden!important;
}

.elementor-button {
    padding: 18px;
}

.RayaWp-Rl a:hover {
    opacity: .95;
}

.RayaWp-Rl a:before , .RayaWp-Rl a:after {
    content: "";
    width: 50px;
    height: 50px;
    background-color: transparent;
    position: absolute;
    border-radius: 100%;
    animation: ripple 0.6s linear infinite;
}

.RayaWp-Rl a:before {
    right: -50px;
}

.RayaWp-Rl a:after {
    left: -50px;
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0);
    }
}

حالا که کد رو اضافه کردی، یه کار دیگه هم باید بکنی تا افکت به درستی اعمال بشه. باید بری به تب پیشرفته و تو قسمت کلاس‌های CSS، کلاس RayaWp-Rl رو به دکمه‌ت اختصاص بدی. 😎
بعد از این کار، همه چیز آماده‌ست و افکت جذاب ریپل روی دکمه‌ت اعمال میشه! 🎉

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

✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

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

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

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

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

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

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

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

Toggle
    🔥
    28 نفر در حال مطالعه این مقاله
    Picture of SaeID
    SaeID

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

    مقالات بیشتر
    بستن