ساخت افکت پالس در دکمه با CSS

افکت پالس (pulse effect) یکی از افکت‌های محبوب برای جلب توجه کاربر به المان‌های تعاملی مثل دکمه‌ها، آیکون‌ها یا کارت‌هاست. این افکت معمولاً با تکرار یک سایه یا شعاع ناپدیدشونده اطراف المان اجرا می‌شود و می‌تواند برای CTA‌ها (Call To Action)، نشان دادن وضعیت فعال یا راهنمایی کاربر مفید باشد.

موارد استفاده متداول

• برجسته‌سازی دکمه‌های مهم (ثبت‌نام، خرید)
• جلب توجه به اعلان‌ها یا حالت‌های جدید
• ایجاد بازخورد بصری سبک و مدرن در UI

روش‌های معمول برای پیاده‌سازی افکت پالس

معمولاً دو رویکرد رایج وجود دارد: استفاده از box-shadow و استفاده از یک pseudo-element (::before یا ::after) که با transform و opacity انیمیت می‌شود. در ادامه هر دو روش را با مثال و نکات بهینه‌سازی می‌بینیم.

1) پیاده‌سازی ساده با box-shadow

<button class="btn-pulse">Send</button>

/* CSS */.btn-pulse{
  --clr: #0ea5e9;
  padding: 12px 20px;
  border: none;
  color: white;
  background: var(--clr);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  outline: none;
  box-shadow: 0 0 0 0 rgba(14,165,233,0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(14,165,233,0.6);
  }
  70%{
    box-shadow: 0 0 0 12px rgba(14,165,233,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(14,165,233,0);
  }
}

توضیح: این کد یک دکمه ساده با انیمیشن keyframes تعریف می‌کند. با تغییر مقدار box-shadow و رنگ RGBA می‌توان شدت و رنگ پالس را تنظیم کرد. این روش ساده و سریع است اما نمایش مکرر box-shadow روی بسیاری از عناصر ممکن است سنگین باشد.

نقاط قوت و ضعف این روش

• مزیت: ساده و سازگار با اکثر مرورگرها.
• عیب: box-shadow می‌تواند پردازنده‌محور (CPU-bound) باشد و در برخی دستگاه‌ها عملکرد ضعیف‌تری داشته باشد.

2) روش بهینه‌تر با pseudo-element و transform

<button class="btn-pulse-2">Subscribe</button>

/* CSS */.btn-pulse-2{
  --clr: #ef4444;
  position: relative;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--clr);
  color: #fff;
  border: none;
  cursor: pointer;
  overflow: visible;
}

.btn-pulse-2::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 120%;
  height: 120%;
  background: rgba(239,68,68,0.3);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: pulse-circle 1.6s infinite;
}

@keyframes pulse-circle{
  0%{
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }
  70%{
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

توضیح: در این نسخه با استفاده از ::after یک دایره نیمه‌شفاف ساخته‌ایم و با transform: scale و opacity آن را انیمیت می‌کنیم. استفاده از transform و opacity معمولاً روی GPU اجرا می‌شود و عملکرد بهتری نسبت به تغییر box-shadow دارد. همچنین با will-change می‌توان به مرورگر کمک کرد تا بهینه‌سازی بیشتری انجام دهد.

دسترسی و کاهش حرکت (prefers-reduced-motion)

برای احترام به کاربرانی که حساس به حرکت هستند، همیشه از مدیا کوئری prefers-reduced-motion استفاده کنید و انیمیشن‌های غیرضروری را غیرفعال یا کم کنید.

@media (prefers-reduced-motion: reduce) {
  .btn-pulse,
  .btn-pulse-2::after {
    animation: none !important;
  }
}

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

ایجاد پالس یک‌بار روی کلیک (با JavaScript)

گاهی می‌خواهید پالس فقط هنگام کلیک اجرا شود. می‌توانید با اضافه/حذف کلاس یا ایجاد المان موقتی این کار را انجام دهید.

<button id="pulseBtn" class="btn-pulse-2">Like</button>

<script>
const btn = document.getElementById('pulseBtn');

btn.addEventListener('click', () => {
  btn.classList.remove('pulse-once');
  // Force reflow to restart animation
  void btn.offsetWidth;
  btn.classList.add('pulse-once');

  // Optional: remove class after animation ends
  setTimeout(() => btn.classList.remove('pulse-once'), 1000);
});
</script>

/* CSS: add this rule */.btn-pulse-2.pulse-once::after{
  animation: pulse-circle 1s forwards;
}

توضیح: این کد JS با افزودن کلاس pulse-once انیمیشن را یک‌بار فعال می‌کند. استفاده از void btn.offsetWidth باعث بازنشانی انیمیشن می‌شود تا در کلیک‌های متوالی مجدداً اجرا گردد. سپس بعد از زمان انیمیشن کلاس حذف می‌شود.

مقایسه سریع روش‌ها

نکات حرفه‌ای و بهینه‌سازی

• از transform و opacity استفاده کنید تا انیمیشن‌ها روی GPU اجرا شوند.
• will-change را فقط برای المان‌های کوتاه‌مدت یا زمانی که واقعاً لازم است به کار ببرید تا مصرف حافظه افزایش نیابد.
• برای رنگ‌ها از CSS variables استفاده کنید تا سفارشی‌سازی و تم‌دهی ساده شود.
• برای دسترسی، از prefers-reduced-motion و همچنین توضیحات متنی یا aria-label مناسب استفاده کنید.
• در انداختن افکت روی تعداد زیادی المان در صفحه احتیاط کنید—انیمیشن‌های هم‌زمان متعدد می‌توانند پردازش را سنگین کنند.

جمع‌بندی

افکت پالس ابزاری مفید برای جذب توجه و بهبود رابط کاربری است. با انتخاب روش مناسب — استفاده از pseudo-element برای عملکرد بهتر، رعایت دسترسی و کنترل‌های JS برای رفتار یک‌بار— می‌توانید تجربه‌ای زیبا و کارآمد بسازید. همیشه قبل از استفاده گسترده، عملکرد را روی دستگاه‌های هدف تست کنید.

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

ارسال