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

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

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

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

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

Так выглядят после установке, что ниже есть переход на Demo страницу:

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

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

HTML

Код

<div class="reating-arkows">
  <input id="a" type="checkbox">
  <label for="a">
  <div class="trianglesusing" data-checked="On" data-unchecked="Off"></div>
  <div class="moresharpened">.reating-arkows</div>
  </label>
</div>
<br>
<div class="reating-arkows twokadjacent">
  <input id="b" type="checkbox">
  <label for="b">
  <div class="trianglesusing" data-checked="On" data-unchecked="Off"></div>
  <div class="moresharpened">.reating-arkows.twokadjacent</div>
  </label>
</div>
<br>
<div class="reating-arkows transparentin">
  <input id="c" type="checkbox">
  <label for="c">
  <div class="trianglesusing" data-checked="On" data-unchecked="Off"></div>
  <div class="moresharpened">.reating-arkows.transparentin</div>
  </label>
</div>
<br>
<div class="reating-arkows imagexplains">
  <input id="d" type="checkbox">
  <label for="d">
  <div class="trianglesusing" data-checked="Good" data-unchecked="Bad"></div>
  <div class="moresharpened">.reating-arkows.imagexplains</div>
  </label>
</div>
<br>
<div class="reating-arkows zatujgdsanuk">
  <input id="e" type="checkbox">
  <label for="e">
  <div class="trianglesusing" data-checked="Yes" data-unchecked="No"></div>
  <div class="moresharpened">.reating-arkows.zatujgdsanuk</div>
  </label>
</div>

CSS

Код

.reating-arkows {
  position: relative;
}
.reating-arkows *, .reating-arkows *:before, .reating-arkows *:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor:pointer;
}
.reating-arkows input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.reating-arkows input[type="checkbox"][disabled] ~ label {
  pointer-events: none;
}
.reating-arkows input[type="checkbox"][disabled] ~ label .trianglesusing {
  opacity: 0.4;
}
.reating-arkows input[type="checkbox"]:checked ~ label .trianglesusing:before {
  content: attr(data-unchecked);
  left: 0;
}
.reating-arkows input[type="checkbox"]:checked ~ label .trianglesusing:after {
  content: attr(data-checked);
}
.reating-arkows label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.reating-arkows label .moresharpened {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 32px;
}
.reating-arkows label .trianglesusing {
  position: relative;
}
.reating-arkows label .trianglesusing:before {
  content: attr(data-checked);
  position: absolute;
  top: 0;
  text-transform: uppercase;
  text-align: center;
}
.reating-arkows label .trianglesusing:after {
  content: attr(data-unchecked);
  position: absolute;
  z-index: 5;
  text-transform: uppercase;
  text-align: center;
  background: white;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.reating-arkows input[type="checkbox"][disabled] ~ label {
  color: rgba(119, 119, 119, 0.5);
}
.reating-arkows input[type="checkbox"]:focus ~ label .trianglesusing, .reating-arkows input[type="checkbox"]:hover ~ label .trianglesusing {
  background-color: #696464;
}
.reating-arkows input[type="checkbox"]:focus ~ label .trianglesusing:after, .reating-arkows input[type="checkbox"]:hover ~ label .trianglesusing:after {
  color: #484242;
}
.reating-arkows input[type="checkbox"]:hover ~ label {
  color: #615b5b;
}
.reating-arkows input[type="checkbox"]:checked ~ label:hover {
  color: #38962d;
}
.reating-arkows input[type="checkbox"]:checked ~ label .trianglesusing {
  background-color: #46963e;
}
.reating-arkows input[type="checkbox"]:checked ~ label .trianglesusing:after {
  color: #388e2e;
}
.reating-arkows input[type="checkbox"]:checked:focus ~ label .trianglesusing, .reating-arkows input[type="checkbox"]:checked:hover ~ label .trianglesusing {
  background-color: #45a53a;
}
.reating-arkows input[type="checkbox"]:checked:focus ~ label .trianglesusing:after, .reating-arkows input[type="checkbox"]:checked:hover ~ label .trianglesusing:after {
  color: #39942f;
}
.reating-arkows label .moresharpened {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.reating-arkows label .trianglesusing {
  -webkit-transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
  transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
  background: #736d6d;
}
.reating-arkows label .trianglesusing:before {
  color: rgba(255, 255, 255, 0.5);
}
.reating-arkows label .trianglesusing:after {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  color: #6b6565;
}
.reating-arkows input[type="checkbox"]:focus ~ label .trianglesusing:after, .reating-arkows input[type="checkbox"]:hover ~ label .trianglesusing:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.reating-arkows input[type="checkbox"]:checked ~ label .trianglesusing:after {
  -webkit-transform: translate3d(65px, 0, 0);
  transform: translate3d(65px, 0, 0);
}
.reating-arkows input[type="checkbox"]:checked:focus ~ label .trianglesusing:after, .reating-arkows input[type="checkbox"]:checked:hover ~ label .trianglesusing:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.reating-arkows label {
  font-size: 14px;
}
.reating-arkows label .trianglesusing {
  height: 36px;
  -webkit-flex: 0 0 134px;
  -ms-flex: 0 0 134px;
  flex: 0 0 134px;
  border-radius: 4px;
}
.reating-arkows label .trianglesusing:before {
  left: 67px;
  font-size: 12px;
  line-height: 36px;
  width: 67px;
  padding: 0 12px;
}
.reating-arkows label .trianglesusing:after {
  top: 2px;
  left: 2px;
  border-radius: 2px;
  width: 65px;
  line-height: 32px;
  font-size: 12px;
}
.reating-arkows label .trianglesusing:hover:after {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}
.reating-arkows.twokadjacent input[type="checkbox"]:focus ~ label .trianglesusing:after, .reating-arkows.twokadjacent input[type="checkbox"]:hover ~ label .trianglesusing:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.reating-arkows.twokadjacent input[type="checkbox"]:checked ~ label .trianglesusing:after {
  -webkit-transform: translate3d(44px, 0, 0);
  transform: translate3d(44px, 0, 0);
}
.reating-arkows.twokadjacent input[type="checkbox"]:checked:focus ~ label .trianglesusing:after, .reating-arkows.twokadjacent input[type="checkbox"]:checked:hover ~ label .trianglesusing:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.reating-arkows.twokadjacent label {
  font-size: 13px;
}
.reating-arkows.twokadjacent label .trianglesusing {
  height: 28px;
  -webkit-flex: 0 0 90px;
  -ms-flex: 0 0 90px;
  flex: 0 0 90px;
  border-radius: 2px;
}
.reating-arkows.twokadjacent label .trianglesusing:before {
  left: 45px;
  font-size: 10px;
  line-height: 28px;
  width: 45px;
  padding: 0 12px;
}
.reating-arkows.twokadjacent label .trianglesusing:after {
  top: 1px;
  left: 1px;
  border-radius: 1px;
  width: 44px;
  line-height: 26px;
  font-size: 10px;
}
.reating-arkows.twokadjacent label .trianglesusing:hover:after {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
.reating-arkows.transparentin input[type="checkbox"]:focus ~ label .trianglesusing:after, .reating-arkows.transparentin input[type="checkbox"]:hover ~ label .trianglesusing:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.reating-arkows.transparentin input[type="checkbox"]:checked ~ label .trianglesusing:after {
  -webkit-transform: translate3d(78px, 0, 0);
  transform: translate3d(78px, 0, 0);
}
.reating-arkows.transparentin input[type="checkbox"]:checked:focus ~ label .trianglesusing:after, .reating-arkows.transparentin input[type="checkbox"]:checked:hover ~ label .trianglesusing:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.reating-arkows.transparentin label {
  font-size: 14px;
}
.reating-arkows.transparentin label .trianglesusing {
  height: 50px;
  -webkit-flex: 0 0 160px;
  -ms-flex: 0 0 160px;
  flex: 0 0 160px;
  border-radius: 4px;
}
.reating-arkows.transparentin label .trianglesusing:before {
  left: 80px;
  font-size: 14px;
  line-height: 50px;
  width: 80px;
  padding: 0 12px;
}
.reating-arkows.transparentin label .trianglesusing:after {
  top: 2px;
  left: 2px;
  border-radius: 2px;
  width: 78px;
  line-height: 46px;
  font-size: 14px;
}
.reating-arkows.transparentin label .trianglesusing:hover:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.reating-arkows.imagexplains input[type="checkbox"][disabled] ~ label {
  color: rgba(181, 62, 116, 0.5);
}
.reating-arkows.imagexplains input[type="checkbox"]:focus ~ label .trianglesusing, .reating-arkows.imagexplains input[type="checkbox"]:hover ~ label .trianglesusing {
  background-color: #b53e74;
}
.reating-arkows.imagexplains input[type="checkbox"]:focus ~ label .trianglesusing:after, .reating-arkows.imagexplains input[type="checkbox"]:hover ~ label .trianglesusing:after {
  color: #82224d;
}
.reating-arkows.imagexplains input[type="checkbox"]:hover ~ label {
  color: #8e2a58;
}
.reating-arkows.imagexplains input[type="checkbox"]:checked ~ label:hover {
  color: #2d825c;
}
.reating-arkows.imagexplains input[type="checkbox"]:checked ~ label .trianglesusing {
  background-color: #379a6e;
}
.reating-arkows.imagexplains input[type="checkbox"]:checked ~ label .trianglesusing:after {
  color: #368a65;
}
.reating-arkows.imagexplains input[type="checkbox"]:checked:focus ~ label .trianglesusing, .reating-arkows.imagexplains input[type="checkbox"]:checked:hover ~ label .trianglesusing {
  background-color: #3d9c72;
}
.reating-arkows.imagexplains input[type="checkbox"]:checked:focus ~ label .trianglesusing:after, .reating-arkows.imagexplains input[type="checkbox"]:checked:hover ~ label .trianglesusing:after {
  color: #2f7757;
}
.reating-arkows.imagexplains label .moresharpened {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.reating-arkows.imagexplains label .trianglesusing {
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
  background: #c14b81;
}
.reating-arkows.imagexplains label .trianglesusing:before {
  color: rgba(255, 255, 255, 0.6);
}
.reating-arkows.imagexplains label .trianglesusing:after {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  color: #b53e74;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"][disabled] ~ label {
  color: rgba(68, 68, 68, 0.5);
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:focus ~ label .trianglesusing, .reating-arkows.zatujgdsanuk input[type="checkbox"]:hover ~ label .trianglesusing {
  background-color: #444;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:focus ~ label .trianglesusing:after, .reating-arkows.zatujgdsanuk input[type="checkbox"]:hover ~ label .trianglesusing:after {
  color: #2b2b2b;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:hover ~ label {
  color: #373737;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:checked ~ label:hover {
  color: #62b125;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:checked ~ label .trianglesusing {
  background-color: #75d32d;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:checked ~ label .trianglesusing:after {
  color: #5da924;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:checked:focus ~ label .trianglesusing, .reating-arkows.zatujgdsanuk input[type="checkbox"]:checked:hover ~ label .trianglesusing {
  background-color: #69be28;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:checked:focus ~ label .trianglesusing:after, .reating-arkows.zatujgdsanuk input[type="checkbox"]:checked:hover ~ label .trianglesusing:after {
  color: #52941f;
}
.reating-arkows.zatujgdsanuk label .moresharpened {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.reating-arkows.zatujgdsanuk label .trianglesusing {
  -webkit-transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  background: #515151;
}
.reating-arkows.zatujgdsanuk label .trianglesusing:before {
  color: rgba(255, 255, 255, 0.7);
}
.reating-arkows.zatujgdsanuk label .trianglesusing:after {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
  color: #444;
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:focus ~ label .trianglesusing:after, .reating-arkows.zatujgdsanuk input[type="checkbox"]:hover ~ label .trianglesusing:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:checked ~ label .trianglesusing:after {
  -webkit-transform: translate3d(58px, 0, 0);
  transform: translate3d(58px, 0, 0);
}
.reating-arkows.zatujgdsanuk input[type="checkbox"]:checked:focus ~ label .trianglesusing:after, .reating-arkows.zatujgdsanuk input[type="checkbox"]:checked:hover ~ label .trianglesusing:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.reating-arkows.zatujgdsanuk label {
  font-size: 13px;
}
.reating-arkows.zatujgdsanuk label .trianglesusing {
  height: 60px;
  -webkit-flex: 0 0 120px;
  -ms-flex: 0 0 120px;
  flex: 0 0 120px;
  border-radius: 60px;
}
.reating-arkows.zatujgdsanuk label .trianglesusing:before {
  left: 60px;
  font-size: 13px;
  line-height: 60px;
  width: 60px;
  padding: 0 12px;
}
.reating-arkows.zatujgdsanuk label .trianglesusing:after {
  top: 2px;
  left: 2px;
  border-radius: 30px;
  width: 58px;
  line-height: 56px;
  font-size: 13px;
}
.reating-arkows.zatujgdsanuk label .trianglesusing:hover:after {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

Подробная информация о коде CSS для вашей кнопки отправки:

.form-submit-button - выбор кнопки отправки в вашей форме.

background - Устанавливает цвет фона за текстом.

color - определяет цвет вашего текста.

border-style - Устанавливает стиль ваших границ кнопок отправки.

border-color - Устанавливает цвет границ вашей кнопки отправки.

height - Устанавливает высоту вашей кнопки и обозначается пикселями.

width - Устанавливает ширину вашей кнопки и обозначается пикселями.

font - Устанавливает свойства шрифта.

Настройка стилей кнопок всех кнопок формы довольно проста, когда у вас есть код CSS вы хотите использовать. Если вам нравится, вы можете просто скопировать и вставить один из приведенных ниже примеров или даже объединить их.

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

12 Июля 2018 Загрузок: 2 Просмотров: 7891 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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