ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильная кнопка вкл/выкл (checkbox) на CSS

Стильная кнопка вкл/выкл (checkbox) на CSS

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

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

В реальности:

Скрипт включит и выключить

Где решили ее видеть:

Код

КСС:

Код

#zornet5 {display: none;}
[for="zornet5"] {
  display: inline-block;
  padding: 8px;
  border-radius: 57px;
  background: rgba(35, 33, 33, 0.08);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.66) inset, 3px 9px 2px 5px rgba(255, 255, 255, .1);
  text-shadow: 0 1px rgba(0, 0, 0, 0.61);
  cursor: pointer;
text-shadow: 0 1px 0 #ffffff;
}
[for="zornet5"]:before, [for="zornet5"]:after {
  display: inline-block;
  padding: 5px 20px;
}
[for="zornet5"]:before {
  content: "ВЫКЛ";
  border-radius: 100px 0 0 100px;
  background: rgba(0, 0, 0, 0.49) linear-gradient(rgba(0, 0, 0, 0.32), rgba(0,0,0,0));
  color: rgba(0,0,0,.4);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.33) inset, 0 1px 0 rgba(255, 255, 255, 0.47);
}
[for="zornet5"]:after {
  content: "ВКЛ";
  border-radius: 0 100px 100px 0;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));
  box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5);
}
#zornet5:checked ~ [for="zornet5"]:after {
  background: rgba(8, 8, 8, 0.3) linear-gradient(rgba(27, 27, 27, 0.3), rgba(0,0,0,0));
  box-shadow: 0 1px 1px rgba(2, 2, 2, 0.5) inset, 0 1px 0 rgba(255, 255, 255, .4);
  color: rgba(10, 10, 10, 0.4);
}
#zornet5:checked ~ [for="zornet5"]:before {
  box-shadow: inset 0 1px 1px 0 rgba(243, 243, 243, 0.2), 0 1px 2px 0 rgba(0,0,0,.5);
  background: linear-gradient(rgba(35, 35, 35, 0.05), rgba(29, 29, 29, 0.33));
  color: inherit;
}

На этом завершаем и сохраняем, чтоб посмотреть визуально, то здесь Demo предоставлено.

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

17 Октября 2017 Просмотров: 1608 Комментариев: (0)

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

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

Kosten

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