Criando um checkbox animado com HTML e CSS

Neste tutorial você vai aprender a criar um input checkbox incrívels de que se transforma de uma simples caixa de marcação para um ícone de checado. Vamos lá? Você vai gostar.

Elementos HTML do Checkbox personalizado

Para criar nosso checkbox personalizado vamos definir no HTML o seguinte código:

<div class="checkbox">
    <input type="checkbox" id="subscribe" checked>
    <label for="subscribe">Inscreva-se</label>
</div>

Veja o que nós criamos no código acima:

• <div class="checkbox">: Inicia um elemento de divisão (div) e atribui a classe "checkbox" a ele. 
• <input type="checkbox" id="subscribe" checked>: Cria um elemento de entrada (input) do tipo "checkbox". O atributo "id" é definido como "subscribe".
• <label for="subscribe">Inscreva-se</label>: Cria um rótulo (label) com o texto "Inscreva-se". O atributo "for" é definido como "subscribe", o que indica que esse rótulo está associado ao elemento de entrada com o mesmo valor no atributo "id".

Em resumo, este código cria um container para o nosso checkbox.

Estilizando o Checkbox personalizado.

Agora podemos estilizar o checkbox personalizado para que fique incrível:

.checkbox {
    position: relative;
    user-select:none;
}
.checkbox input {
    visibility: hidden;
}
.checkbox label {
    display: flex;
    align-items: center;
    color: #fff;
    padding-left: 30px;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}
.checkbox label::before {
    position: absolute;
    left: 0;
    border: 2px solid #00a5fd;
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 6px;
    transition: all .2s ease-in-out;
}

Neste código CSS vamos definir o input checkbox padrão como invisivel para podemos usar apenas a sua função de "marca e desmarcar" e com isso aplica o efeito em outros elementos.

Usamos o pseudo-elemento "before" do elemento label para criar a caixa e o ícone de checked.

Agora basta aplica aplica o evento ":checked" e usar o seletor (~) de próximo irmão para realizar o efeito. Veja:

.checkbox input:checked ~ label::before{
    transform: rotate(40deg);
    border-left-color:transparent;
    border-top-color:transparent;
    border-radius: 0;
    width: 10px;
    height: 20px;
    left: 10px;
    top: calc(50% - 1px);
}

Lembre-se que o tutorial em vídeo é melhor explicado do este em texto. Então assista o vídeo e aprenda mais.