input #002 - Checkbox

index.pug

.checkbox-container
	input(type="checkbox" id="rememberMe")
	label(for="rememberMe" class="checkbox")
	label(for="rememberMe") Remember me?
	

input-002-checkbox.markdown

input #002 - Checkbox

A Pen by Rab Rennie on CodePen.

License.

style.scss

.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;
		}
	}
}