پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<button class="radikalwp-btn-neonpulse">شروع بازی<//button>
.radikalwp-btn-neonpulse {
  padding: 13px 36px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #e9d5ff;
  background: #14082e;
  border: 1.5px solid #a855f7;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(168, 85, 247, .45), inset 0 0 8px rgba(168, 85, 247, .18);
  animation: radikalwp-neonpulse-glow 2.2s ease-in-out infinite;
  transition: background .3s ease;
}
.radikalwp-btn-neonpulse:hover { background: #1e0b45; }
@keyframes radikalwp-neonpulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(168, 85, 247, .35), inset 0 0 6px rgba(168, 85, 247, .15); }
  50%      { box-shadow: 0 0 22px rgba(168, 85, 247, .75), inset 0 0 12px rgba(168, 85, 247, .3); }
}

درباره این اسنیپت

دکمه‌ای با قاب نئونی بنفش که مثل ضربان قلب، هاله‌ای نورانی دور آن بسته می‌شود. پس‌زمینه تیره و کنتراست بالای لبه‌ها حس گیمینگ و تکنولوژی می‌سازد. مناسب دکمه‌های «شروع بازی»، اعلان‌های ویژه و بخش‌های تیره سایت است. افکت پالس با انیمیشن box-shadow ساخته شده و کاملاً مستقل از جاوااسکریپت است.

پرسش‌های متداول

کافی است مقدار رنگ #a855f7 در سه جای کد (border و box-shadow و انیمیشن) با رنگ دلخواه جایگزین شود. برای هماهنگی کامل، همه مقادیر را با یک رنگ یکسان عوض کنید.

اگر سایت شما به prefers-reduced-motion توجه می‌کند، بهتر است انیمیشن را داخل media query مربوطه غیرفعال کنید. خود کد بدون حرکت اجباری صفحه اجرا می‌شود.

بله؛ کد را داخل ویجت HTML المنتور بگذارید. کلاس‌ها با پیشوند radikalwp ایزوله هستند و با استایل قالب شما تداخل نمی‌کنند.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۶ از ۵ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

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

دکمه نئون درخشان

دکمه نئون درخشش
۸۰
۴.۶ (۱۲)
پیش‌نمایش زنده اسنیپت

دکمه نئون آبی

نئون دکمه آبی
۵۲
۴.۵ (۸)
پیش‌نمایش زنده اسنیپت

دکمه هاله نئونی بنفش

دکمه نئون هاور
۴۵
۴.۷ (۷)