<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 ایزوله هستند و با استایل قالب شما تداخل نمیکنند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۵ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!