Efeito de animação com CheckBox utilizando CSS3 puro

0

Olá pessoal!

Faz um tempo que eu não falo de CSS3 aqui no blog, e acho que hoje podemos ver uma dica bastante útil, pelo menos pra mim ajudou.

É sobre como criar um efeito de animação com checkbox utilizando apenas CSS3.

css animation checkbox

O efeito é bastante bacana e você vai aprender agora! Vamos lá:

Veja o código HTML:

<ul>
  <li>
    <input type="checkbox" class="styled" id="b_1">
    <label class="styled" for="b_1">Checkbox Um</label>
  </li>
  
  <li>
    <input type="checkbox" class="styled" id="b_2">
    <label class="styled" for="b_2">Checkbox Dois</label>
  </li>
  
  <li>
    <input type="checkbox" class="styled" id="b_3">
    <label class="styled" for="b_3">Checkbox Três</label>
  </li>
  
</ul>

Veja o código CSS:

ul {
  list-style: none;
}
ul li {
  padding: 0.2em
}

label.styled {
  background-color: #f8a901;
  display: block;
  width: 300px;
  text-align: center;
  padding: 0.6em 2em;
  color: #fff;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
} 
label.styled:before {
  content: "«";
  line-height: 40px;
  font-size: 25px;
  color: #fff;
  width:40px;
  height:100%; 
  background-color: #9a5502;
  position: absolute;
  top:0;
  left:100%;
  transition: all 0.4s ease;
  opacity: 0;
  border-right: 2px solid #fff;
}
label.styled:hover:before {
  left: 98%;
  opacity: .3;
}
input.styled {
  display: none;
}

/* :: CHECAR :: */
input.styled:checked ~ label.styled {
  background-color: #f88701;
  animation: throw 0.5s linear;
}
input.styled:checked ~ label.styled:before {
  left:0px;
  opacity: 1;
}
@keyframes throw {
   0%,63% {margin-left: 0;}
   64% {margin-left: -5px;}
   100% {margin-left: 0;}
}

Viu como é bastante simples?

Utilizando apenas uma jogada com o conteudo Before e Animation do CSS você deu um efeito bacana!

Até a próxima pessoal! 😉

 

 

 

Compartilhe.