ZorNet.Ru — сайт для вебмастера » HTML и CSS » Пользовательский флажок CSS с надписью внутри

Пользовательский флажок CSS с надписью внутри

Сегодня в материале представлены не сложные по своим функциям, но красивые по дизайну простые настраиваемые флажки, которые используют CSS и JS. Чтоб понять такую кнопку и ее функциональность, то здесь мы выстраиваем по вверх градиент, где добавляем шрифтовые кнопки. Но главное про включение и отключение, то здесь по умолчанию, это когда отключены, то они по умолчанию в темном формате.

Как только делаем клик, то автоматически преображаются, где можно наблюдать, какая их функций подключена, так как отключение происходит с аналогичным кликом по той же кнопке. По сути, мы хотим преобразовать дизайн, которая на прямую повлияет на стилистику дизайн. В конце концов, у нашего флажка будут красивые цвета и переходы, а самое главное, он будет выглядеть и ощущаться одинаково во всех основных браузерах.

Такие кнопки получатся, где некоторые включены, а другие отключены.

Простой настраиваемый флажок при участие CSS и JS

Установка:

Шрифтовые кнопки

Код

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>

HTML

Код

<div class="controvesu">
  <h1>Выберите свою кнопку</h1>
  <div class="sequence">
  <label>
  <input type="checkbox" name="" />
  <div class="knopka-apekucen">
  <i class="fa fa-heart" aria-hidden="true"></i>
  <span>Здоровье</span>
  </div>
  </label>
  <label>
  <input type="checkbox" name="" />
  <div class="knopka-apekucen">
  <i class="fa fa-music" aria-hidden="true"></i>
  <span>Музыка</span>
  </div>
  </label>
  <label>
  <input type="checkbox" name="" />
  <div class="knopka-apekucen">
  <i class="fa fa-imdb" aria-hidden="true"></i>
  <span>Кино</span>
  </div>
  </label>
  <label>
  <input type="checkbox" name="" />
  <div class="knopka-apekucen">
  <i class="fa fa-book" aria-hidden="true"></i>
  <span>Книги</span>
  </div>
  </label>

  <label>
  <input type="checkbox" name="" />
  <div class="knopka-apekucen">
  <i class="fa fa-dribbble" aria-hidden="true"></i>
  <span>Спорт</span>
  </div>
  </label>

  <label>
  <input type="checkbox" name="" />
  <div class="knopka-apekucen">
  <i class="fa fa-desktop" aria-hidden="true"></i>
  <span>Технология</span>
  </div>
  </label>
  <label>
  <input type="checkbox" name="" />
  <div class="knopka-apekucen">
  <i class="fa fa-gamepad" aria-hidden="true"></i>
  <span>Игры</span>
  </div>
  </label>
  </div>
  </div>

CSS

Код

.sequence {
  margin: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.sequence label {
  padding: 20px;
  cursor: pointer;
  display: flex;
}

.sequence label input[type="checkbox"] {
  display: none;
}

.sequence label .knopka-apekucen {
  position: relative;
  display: flex;
  width: 120px;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  background-color: #353746;
  color: #fff;
  border-radius: 3px;
  font-size: 21px;
  transition: 0.5s;
  user-select: none;
}

.sequence label input[type="checkbox"]:checked ~ .knopka-apekucen {
  background: linear-gradient(138deg, #da2c4d, #f8ab37);
  color: #fff;
}

.sequence label .knopka-apekucen span {
  margin: 5px;
  font-size: 18px;
}

.controvesu .btn {
  width: 130px;
  height: 40px;
  position: absolute;
  left: 550px;
  font-size: 16px;
  border: 0;
  outline: none;
  transition: 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

Основное описанные выше, где прошли к универсальному способу стилизации флажков таким образом, чтобы они выглядели и ощущались одинаково во всех браузерах.

Демонстрация

08 Мая 2021 Загрузок: 6 Просмотров: 1081 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0