ZorNet.Ru — сайт для вебмастера » HTML и CSS » Радиокнопки с шрифтовыми знаками на CSS

Радиокнопки с шрифтовыми знаками на CSS

Уже не кого не удивишь шрифтовыми иконками, но если только добавить к ним радиокнопки, где при клике визуально виден эффект включение кнопки. В данном примере задействован шрифт Font Awesome и графическая иконка. Но плюс в том, что здесь все работает при помощи стилей CSS, где даже можем задавать кнопкам стильность или графический оттенок цвета. Такие кнопки отлично подойдут на многие тематические сайты, ведь по умолчанию они идут в ряд в 4 кнопки. Что веб-мастеру можно задать любое направление. Это может быть раздел на сайте, которые выполнены так оригинально.

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

Так выглядят после установки:

Установка:

Шрифтовые знаки в HEAD

Код

HTML

Код

<div class="karkas_foemata">
  <label class="upravlene">
  <input type="radio" name="money" value="rub" />
  <span class="vstupitenat">
  <i class="fa fa-rub"></i>
  <span>Скрипты</span>
  </span>
  </label>
  <label class="upravlene">
  <input type="radio" name="money" value="usd" checked="checked" />
  <span class="vstupitenat">
  <i class="fa fa-usd"></i>
  <span>Шаблоны</span>
  </span>
  </label>
  <label class="upravlene">
  <input type="radio" name="money" value="eur" />
  <span class="vstupitenat">
  <i class="fa fa-eur"></i>
  <span>Коды</span>
  </span>
  </label>
  <label class="upravlene">
  <input type="radio" name="money" value="dub" />
  <span class="vstupitenat">
  <img src="Ссылка.png" />
  <span>Стили</span>
  </span>
  </label>
</div>

CSS

Код

.karkas_foemata {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}
.karkas_foemata .upravlene {
  width: 180px;
  transition: all ease 250ms;
}
.karkas_foemata .upravlene input {
  display: none;
}
.karkas_foemata .upravlene .vstupitenat {
  background: #ffffff;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  margin: 0 10px;
  position: relative;
  transition: all ease 250ms;
  border: 4px solid #BFE2FF;
  display: block;
}
.karkas_foemata .upravlene:hover .vstupitenat {
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 6px 12px rgba(0,0,0,0.2);
}
.karkas_foemata .upravlene .vstupitenat i {
  display: block;
  font-size: 70px;
  color: #BFE2FF;
  font-weight: bold;
}
.karkas_foemata .upravlene .vstupitenat img {
  width: 70px;
}
.karkas_foemata .upravlene .vstupitenat span {
  font-family: Tahoma, sans-serif;
  letter-spacing: 1px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  margin-top: 16px;
  color: #AAA;
}
.karkas_foemata .upravlene input:checked + .vstupitenat span {
  color: #444444;
  opacity: 1;
  transition: opacity ease 250ms;
}
.karkas_foemata .upravlene input:checked + .vstupitenat:after {
  top: 0;
  right: 20px;
  transform: translateY(-50%);
  animation-name: animation;
  animation-duration: 250ms;
  background-color: #FFF;
  font-size: 25px;
  display: block;
  position: absolute;
  border: 5px solid #FFF;
  padding-left: 2px;
  content: "\f058";
  font-family: "FontAwesome";
  font-weight: bold;
}
.karkas_foemata .upravlene input:checked + .vstupitenat {
  border: 4px solid #337AB7;
}
.karkas_foemata .upravlene input:checked + .vstupitenat:after,
.karkas_foemata .upravlene input:checked + .vstupitenat i {
  color: #337AB7;
}
@keyframes animation {
  0% {
  transform: translateY(-50%) scale(0);
  }
  75% {
  transform: translateY(-50%) scale(1.3);
  }
  100% {
  transform: translateY(-50%) scale(1);
  }
}
@media screen and (max-width: 768px) {
  .karkas_foemata {
  display: block;
  }
  .karkas_foemata .upravlene {
  width: 100%;
  margin-bottom: 30px;
  }
}

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

Демонстрация
Источник: atuin.ru

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

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

СКАЧАТЬ

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

Kosten

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