ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивая стилизация Radio кнопок на CSS

Красивая стилизация Radio кнопок на CSS

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

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

Как вариант светлого оттенка:

Здесь представлен темный, а светлый можно взять на demo странице или скачать:

Создание радио кнопок на чистом стиле CSS

Установка:

HTML

Код

<div class="knopka">
  <input type="radio" id="radio-1" name="knopka" checked />
  <label class="punak" for="radio-1">Перевый<span class="puvention">2</span></label>
  <input type="radio" id="radio-2" name="knopka" />
  <label class="punak" for="radio-2">Второй</label>
  <input type="radio" id="radio-3" name="knopka" />
  <label class="punak" for="radio-3">Третий</label>
  <span class="sailplane"></span>
</div>

CSS

Код

:root {
  --primary-color: #45474c;
  --secondary-color: #4b5563;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

.knopka {
  display: -webkit-box;
  display: flex;
  position: relative;
  background-color: #26323e;
  box-shadow: 0 0 1px 0 rgba(70, 76, 86, 0.32), 1px 3px 10px 0 rgba(55, 67, 90, 0.55);
  padding: 0.75rem;
  border-radius: 99px;
}

.knopka * {
  z-index: 2;
}

input[type="radio"] {
  display: none;
}

.punak {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 54px;
  width: 200px;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  -webkit-transition: color 0.15s ease-in;
  transition: color 0.15s ease-in;
  color: #f7ffd3;
}

.puvention {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 0.75rem;
  border-radius: 50%;
  background-color: #495465;
  -webkit-transition: 0.15s ease-in;
  transition: 0.15s ease-in;
}

input[type="radio"]:checked+label {
  color: var(--primary-color);
}

input[type="radio"]:checked+label {
  color: #f2ffad;
}

input[id="radio-1"]:checked~.sailplane {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

input[id="radio-2"]:checked~.sailplane {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

input[id="radio-3"]:checked~.sailplane {
  -webkit-transform: translateX(200%);
  transform: translateX(200%);
}

.sailplane {
  position: absolute;
  display: -webkit-box;
  display: flex;
  height: 54px;
  width: 200px;
  background-color: var(--secondary-color);
  z-index: 1;
  border-radius: 99px;
  -webkit-transition: 0.25s ease-out;
  transition: 0.25s ease-out;
}

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

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

02 Июня 2020 Загрузок: 3 Просмотров: 1366 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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