پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<button class="radikalwp-btn-neon">کاوش کنید<//button>
.radikalwp-btn-neon {
  padding: 12px 30px;
  font-size: 16px;
  font-family: inherit;
  color: #22d3ee;
  background: transparent;
  border: 2px solid #22d3ee;
  border-radius: 10px;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 0 8px rgba(34, 211, 238, .4), inset 0 0 8px rgba(34, 211, 238, .15);
}
.radikalwp-btn-neon:hover {
  color: #06121a;
  background: #22d3ee;
  box-shadow: 0 0 24px rgba(34, 211, 238, .8), 0 0 48px rgba(34, 211, 238, .4);
}

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

دکمه شفاف با حاشیه درخشان نئونی؛ در حالت هاور هاله نور شدیدتر می‌شود. مناسب وب‌سایت‌های تکنولوژی و تیره. این دکمه برای فراخوان‌های اقدام (CTA)، فرم‌ها و ناوبری طراحی شده است. همه کلاس‌ها با پیشوند radikalwp شروع می‌شوند تا با استایل‌های قالب شما تداخلی پیش نیاید و راحت‌تر شخصی‌سازی شوند. انیمیشن‌ها با GPU-friendly خواص transform و opacity ساخته شده‌اند تا سرعت سایت شما تحت تأثیر قرار نگیرد.

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

بله، این کد به‌صورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه می‌شود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.

بله، اندازه‌ها با واحدهای نسبی و flex/grid ساخته شده‌اند و در نمایشگرهای کوچک هم درست نمایش داده می‌شوند. اگر عرض ثابت دیدید، می‌توانید آن را با max-width برای موبایل تنظیم کنید.

خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا می‌شوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

دکمه نئون سبز

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

دکمه نئون صورتی متحرک

دکمه نئون صورتی
۳۰
۴.۳ (۴)
پیش‌نمایش زنده اسنیپت

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

دکمه نئون درخشش
۸۰
۴.۶ (۱۲)