» »

Кнопка переключатель света на чистом CSS

Кнопка переключатель света на чистом CSS

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

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

1. Здесь идет по умолчанию, что по размеру выставляем самостоятельно.

Кнопки-переключатели при помощи CSS3

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

Стильный CSS переключатель без JS

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

HTML

Код
<input type="checkbox" checked="checked" class="vesametun">
<div class="donetugo"></div>
<div class="branpodes"></div>

CSS

Код
.vesametun {
  position: absolute;
  font-size: var(--font-size);  
  width: 5em;
  height: 8em;
  margin: 0;
  filter: opacity(0);
  cursor: pointer;
  z-index: 2;
}

.vesametun ~ .donetugo {
  position: absolute;
  width: 5em;
  height: 8em;
  background: linear-gradient(#bbbec1, #fffefe);
  border-radius: 1.2em;
  box-shadow: inset 0 -0.2em 0.4em rgba(197, 193, 193, 0.75), inset 0 -0.8em 0 0.1em rgba(169, 166, 166, 0.85), 0 0 0 0.1em rgba(105, 102, 102, 0.8), 0 0.6em 0.6em rgba(31, 30, 30, 0.3), 0 0 0 0.4em #caced0;
}

.vesametun ~ .donetugo::before,
.vesametun ~ .donetugo::after {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 1.4em;
  font-family: sans-serif;
}

.vesametun ~ .donetugo::before {
  content: '|';
  bottom: 1em;
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.8);
}

.vesametun ~ .donetugo::after {
  content: 'O';
  top: 0.6em;
  color: rgba(0, 0, 0, 0.45);
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.4);
}

.vesametun:checked ~ .donetugo {
  background: linear-gradient(#87898c, #f5f2f2);
  box-shadow: inset 0 0.2em 0.4em rgba(197, 192, 192, 0.75), inset 0 0.8em 0 0.1em rgba(236, 231, 231, 0.77), 0 0 0 0.1em rgba(103, 101, 101, 0.8), 0 -0.2em 0.2em rgba(27, 26, 26, 0.18), 0 0 0 0.4em #d0d0d0;
}

.vesametun:checked ~ .donetugo::before {
  bottom: 0.3em;
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
}

.vesametun:checked ~ .donetugo::after {
  top: 1.2em;
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.15);
}

.vesametun ~ .branpodes {
  width: 100vw;
  height: 100vh;
  background-color: #0a0a16;
  z-index: 1;
  filter: opacity(0.7);
}

.vesametun:checked ~ .branpodes {
  filter: opacity(0);
}

На этот раз созданная кнопка идет под гладкий и интерактивный стиль, которая изначально основана на превосходном дизайне, используя только CSS.

Демонстрация
30.09.2018 Просмотров: 204 Комментарий: (0)

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

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

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