🔧 Как сверстать переключатель (toggle switch) в CSS?
Переключатель — это удобный UI-элемент, который позволяет пользователю включать или отключать опцию. Давай разберем, как его создать с нуля!

📌 HTML-структура
Создаем label, внутри которого будет скрытый input (чекбокс) и стилизованный div, который будет играть роль переключателя.

<label class="switch">
  <input type="checkbox">
  <div class="switch-slider"></div>
</label>

🎨 CSS-стили

1️⃣ Базовый контейнер (.switch)
Отображаем label как inline-flex, чтобы удобно управлять размерами и сделать переключатель кликабельным.

2️⃣ Скрываем чекбокс (.switch input)
Стандартный чекбокс нам не нужен, поэтому скрываем его через display: none;.

3️⃣ Фон переключателя (.switch-slider)
- Задаем ширину 60px, высоту 30px, закругляем углы.
- Добавляем transition, чтобы анимация переключения была плавной.
- При hover цвет немного затемняется.

4️⃣ Ползунок (::before)
- Абсолютно позиционируем его внутри switch-slider.
- Делаем 24px в диаметре, белый круг.
- По умолчанию располагаем его слева (отступ 4px).

5️⃣ Стилизация активного состояния (input:checked)
- Меняем цвет фона (background-color: #18A0FB).
- Двигаем круг вправо (transform: translateX(28px);).

.switch {
    display: inline-flex;
    cursor: pointer;
}

.switch input {
    display: none;
}

.switch-slider {
    flex-shrink: 0;
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #e6e6e6;
    border-radius: 16px;
    transition: 0.2s;
}

.switch-slider:hover {
    background-color: #d6d6d6;
}

.switch-slider::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 4px;
    bottom: 0;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: auto;
    background-color: #fff;
    transition: 0.2s;
}

.switch input:checked + .switch-slider {
    background-color: #18A0FB;
}

.switch input:checked + .switch-slider:hover {
    background-color: #907CFF;
}

.switch input:checked + .switch-slider::before {
    transform: translateX(28px);
}

Теперь у нас есть красивый и плавный переключатель, который легко использовать в любом проекте! 🚀

💡 Посмотреть живой пример на CodePen:
👉 CodePen – Переключатель 🚀

#переключатель #css #frontend #html #вебразработка #верстка #ui #ux #codepen #toggle #webdevelopment #switch

✅ Как сверстать чекбокс?

Создаем кастомный чекбокс с гибкой версткой! Стандартный <input type="checkbox"> плохо стилизуется, поэтому используем label, скрываем input и оформляем кастомный checkbox__checkmark.

🔹 HTML

<label class="checkbox">
    <input type="checkbox">
    <div class="checkbox__checkmark"></div>
    <span class="checkbox__title">👉 Текст чекбокса. С возможностью безопасного переноса.</span>
</label>

📌 input остается интерактивным, но скрытым.

🔹 CSS

.checkbox {
    display: inline-flex;
    padding-top: 4px;
    padding-left: 38px;
    min-height: 28px;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 18px;
    color: #1b1b1b;
    user-select: none;
    position: relative;
}

.checkbox input {
    position: absolute;
    opacity: 0;
}

.checkbox__checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px solid #d0d0d0;
    transition: 0.2s;
}

.checkbox__checkmark::after {
    content: "";
    position: absolute;
    opacity: 0;
    left: 8px;
    width: 7px;
    height: 16px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
    transition: 0.2s;
}

.checkbox input:checked ~ .checkbox__checkmark {
    background: #18A0FB;
    border-color: #0f88d8;
}

.checkbox input:checked ~ .checkbox__checkmark:after {
    opacity: 1;
}

🛠️ Как это работает?
✔️ input скрыт, но остается интерактивным.
✔️ checkbox__checkmark – кастомная галочка.
✔️ При checked, фон чекбокса меняется и появляется ::after с галочкой.

💡 Пример на CodePen:
🔗 Живой пример

#чекбокс #css #frontend #html #вебразработка #верстка #ui #ux #codepen #webdevelopment #checkbox

🔘 Как сверстать кнопку?

Создадим стильную, адаптивную и безопасную кнопку с возможностью добавления иконок!

📌 HTML

<button class="button">
    <span>Кнопка</span>
</button>

📌 Текст оборачиваем в <span> — это защитит его от смещения при добавлении иконки.

🎨 CSS

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Отступ между текстом и иконкой */
    padding: 12px 22px;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.03em;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    user-select: none;
    background-color: #29be53;
    border: none;
    border-radius: 12px;
    transition: 0.2s;
}

.button svg {
    flex-shrink: 0; /* Иконка не сжимается */
    width: 18px;
    height: 18px;
}

.button:hover {
    background-color: #167832;
}

.button:active {
    background-color: #0f5623;
}

🛠️ Как это работает?
✔️ inline-flex позволяет выровнять контент внутри кнопки.
✔️ gap — автоматически регулирует отступы, независимо от наличия иконки.
✔️ flex-shrink: 0 для SVG защищает иконку от деформации.
✔️ transition создаёт плавные эффекты при наведении и нажатии.

🖼 Добавляем иконку

<button class="button">
    <svg>...</svg>
    <span>Кнопка</span>
</button>

📌 Иконку можно разместить слева или справа без изменения отступов!

💡 Пример на CodePen:
🔗 Живой пример

#frontend #верстка #html #css #кнопка #button #разработка