<button class="radikalwp-btn-ring"><span>شروع کنید<//span><//button>
.radikalwp-btn-ring {
position: relative;
padding: 3px;
border: none;
background: transparent;
border-radius: 14px;
cursor: pointer;
overflow: hidden;
}
.radikalwp-btn-ring::before {
content: '';
position: absolute;
inset: -120%;
background: conic-gradient(#6366f1, #ec4899, #f59e0b, #6366f1);
animation: radikalwp-ring-spin 3s linear infinite;
}
.radikalwp-btn-ring span {
position: relative;
display: inline-block;
padding: 12px 30px;
font-family: inherit;
font-size: 16px;
font-weight: 700;
color: #fff;
background: #0f172a;
border-radius: 12px;
}
@keyframes radikalwp-ring-spin { to { transform: rotate(360deg); } }
درباره این اسنیپت
حاشیه گرادیانی چرخان دور دکمه با پسزمینه تیره؛ افکت مدرن و چشمگیر برای دکمههای اصلی صفحه. این دکمه برای فراخوانهای اقدام (CTA)، فرمها و ناوبری طراحی شده است. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
دکمه خط دور متحرک
حاشیهای که با هاور دور تا دور دکمه را میکشد و مسیر موس را دنبال میکند؛ افکتی شیک و حرفه…
دکمه گرادیان بنفش
دکمهای با پسزمینه گرادیان بنفش-صورتی و افکت جابهجایی گرادیان هنگام هاور؛ مناسب فراخوان…
دکمه حاشیه متحرک
دکمهای که گرادیان حاشیهاش دائماً میچرخد؛ جلبتوجه بالا برای تخفیفها و رویدادها. این دک…
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!