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]

html css Check box

The post Tick Animation In CSS Input Checkbox appeared first on csshint - A designer hub.