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

Переключатель тумблер с помощью CSS

Это простой тумблер для всех браузеров, который имеет небольшую анимацию при включении и выключении, где присутствует чистый и минимальный CSS. Вы можете использовать Toggle Switch вместо флажка для простых опций, как включит и аналогично для отключения, где смотрится оригинально. Он автономный, где идет чистый и минимальным кодом CSS, и не требуется подключение JS.

Тумблеры считаются самым заметным элементом пользовательского интерфейса в разнообразных формах. До появления переключателей мы часто использовали один элемент-флажок для активации или выключения чего-либо. В то время как это сделало работу, взгляд не был очень убедительным.

С другой стороны, переключатели предлагают дизайнерам возможность персонализировать пользовательский интерфейс таким образом, чтобы он соответствовал остальной части веб-сайта.

Приступаем к установке:

HTML

Код

CSS

Код

.zadekides-naxamopud {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 80px;
  height: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  line-height: 1.2;
  font-size: 14px;
}

.zadekides-naxamopud input.input-checkbox {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 30px;
  padding: 0;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.zadekides-naxamopud .kalsetuoigu-kevasukopmad {
  position: relative;
  width: 80px;
  height: 30px;
  background-color: #95a5a6;
  -webkit-transition: background 0.25s ease-out 0s;
  transition: background 0.25s ease-out 0s;
}

.zadekides-naxamopud .kalsetuoigu-kevasukopmad:before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  background-color: #7f8c8d;
  top: 5px;
  left: 5px;
  -webkit-transition: left 0.3s ease-out 0s;
  transition: left 0.3s ease-out 0s;
  z-index: 10;
}

.zadekides-naxamopud input.input-checkbox:checked + .kalsetuoigu-kevasukopmad {
  background-color: #2ecc71;
}

.zadekides-naxamopud input.input-checkbox:checked + .kalsetuoigu-kevasukopmad:before {
  left: 55px;
  background-color: #27ae60;
}

.zadekides-naxamopud .perekligas-vk,
.zadekides-naxamopud .perekligas-vu {
  float: left;
  color: #fff;
  font-weight: 700;
  padding-top: 6px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.zadekides-naxamopud .perekligas-vk {
  margin-left: 30px;
  opacity: 1;
}

.zadekides-naxamopud .perekligas-vu {
  display: none;
  float: right;
  margin-right: 35px;
  opacity: 0;
}

.zadekides-naxamopud input.input-checkbox:checked + .kalsetuoigu-kevasukopmad .perekligas-vk {
  display: none;
  opacity: 0;
}

.zadekides-naxamopud input.input-checkbox:checked + .kalsetuoigu-kevasukopmad .perekligas-vu {
  display: block;
  opacity: 1;
}

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

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

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

01 Мая 2019 Загрузок: 1 Просмотров: 1367 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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