<label class="radikalwp-sw-std"><input type="checkbox" checked /><span><//span><//label>
.radikalwp-sw-std input { display: none; }
.radikalwp-sw-std span {
display: block;
width: 52px;
height: 28px;
padding: 3px;
background: #cbd5e1;
border-radius: 999px;
cursor: pointer;
transition: background .3s ease;
box-sizing: border-box;
position: relative;
}
.radikalwp-sw-std span::before {
content: '';
position: absolute;
top: 3px;
right: 3px;
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
transition: transform .3s cubic-bezier(.4, 1.4, .6, 1);
}
.radikalwp-sw-std input:checked + span { background: #34c759; }
.radikalwp-sw-std input:checked + span::before { transform: translateX(-24px); }
درباره این اسنیپت
سوییچ کلاسیک iOS با دستگیره سفید و مسیر سبز؛ گزینه امن و آشنا برای هر تنظیماتی. حرکت فنری نرم آن حس باکیفیتی به فرم میدهد. این کلید برای تنظیمات دوجانبه مانند فعال/غیرفعال، روشن/خاموش و پذیرش شرایط کاربرد دارد. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۶ از ۵ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!