<label class="radikalwp-sw-glow"><input type="checkbox" checked /><span><i><//i><//span><//label>
.radikalwp-sw-glow input { display: none; }
.radikalwp-sw-glow span {
display: flex;
align-items: center;
width: 56px;
height: 30px;
padding: 4px;
background: linear-gradient(135deg, #1e293b, #334155);
border: 1px solid #475569;
border-radius: 999px;
cursor: pointer;
transition: all .3s ease;
box-sizing: border-box;
}
.radikalwp-sw-glow i {
width: 20px;
height: 20px;
background: #64748b;
border-radius: 50%;
transition: all .3s cubic-bezier(.4, 1.5, .6, 1);
}
.radikalwp-sw-glow input:checked + span {
border-color: #8b5cf6;
box-shadow: 0 0 18px rgba(139, 92, 246, .45), inset 0 0 8px rgba(139, 92, 246, .25);
}
.radikalwp-sw-glow input:checked + span i {
transform: translateX(-26px);
background: #a78bfa;
box-shadow: 0 0 10px rgba(167, 139, 250, .9);
}
درباره این اسنیپت
سوییچ با مسیر شیشهای و دستگیرهای که در حالت روشن هاله رنگی میگیرد؛ مدرن و خوشدست. برای تنظیمات اپهای مدرن و پنلهای تیره زیباست. این کلید برای تنظیمات دوجانبه مانند فعال/غیرفعال، روشن/خاموش و پذیرش شرایط کاربرد دارد. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!