Анимированные чебоксы на CSS3

Создание анимированных чебоксов (Checkbox) на чистом CSS3

Как использовать:

1. Сам чебокс (Checkbox)

<label>
  <input type="checkbox">
  <span>material checkbox</span> 
</label>

2. Стили CSS3

label {
  margin: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1rem;
  height: 1rem;
  background: inherit;
}

input {
  background: tra;
  position: relative;
  cursor: pointer;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: .4rem;
  background: inherit;
}

input:before {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  background: inherit;
  cursor: pointer;
}

input:after {
  content: "";
  transition: .4s ease-in-out;
  position: absolute;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  border: .1rem solid rgba(200, 200, 200, .3);
}

input:checked:after {
  transform: rotate(-45deg);
  height: .5rem;
  border-color: #43A047;
  border-top-color: transparent;
  border-right-color: transparent;
}

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.