A simple CSS only tick mark animation for checkbox input field designed by Rab Rennie.
css Check box
HTML / PUG
[code language=”html”]
.checkbox-container
input(type="checkbox" id="rememberMe")
label(for="rememberMe" class="checkbox")
label(for="rememberMe") Remember me?
[/code]
CSS / SCSS
[code language=”css”]
.checkbox-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
input[type="checkbox"] {
display: none;
}
label {
cursor: pointer;
}
}
.checkbox-container .checkbox {
display: inline-block;
width: 15px;
height: 15px;
background: #d0d0d0;
&:after {
content: "";
position: absolute;
width: 0px;
height: 3px;
background: #3498db;
transform:translate(4px, 11px) rotate(-45deg);
transform-origin: left;
transition: all 150ms;
transition-delay: 0ms;
}
&:before {
content: "";
position: absolute;
width: 0px;
height: 3px;
background: #3498db;
transform:translate(1px, 6px) rotate(45deg);
transform-origin: left;
transition: all 150ms;
transition-delay: 150ms;
}
}
.checkbox-container input[type="checkbox"]:checked {
& ~ .checkbox {
&:before {
width: 7px;
transition-delay: 0ms;
}
&:after {
width: 13px;
transition-delay: 150ms;
}
}
}
[/code]
