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.
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! 😉
