<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link href="https://fonts.googleapis.com/css?family=Dosis:400,800" rel="stylesheet">
	
</head>
<body>
	<div class="container">
		<input type="checkbox" id="someID">
		<label for="someID" class="checkbox-1">
			I agree with the terms and conditions
		</label>
	</div>
</body>
</html>
.container {
	width: 500px;
	margin: 100px auto;
	font-family: 'Dosis', sans-serif;
}

#someID {
	display: none;
}

.checkbox-1 {
	cursor: pointer;
	
	position: relative;
	padding-left: 40px;
	padding-top: 5px;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 20px;
}

.checkbox-1:before {
	position: absolute;
	content: '';
	width: 30px;
	height: 30px;
	border-radius: 4px;
	background: #333;
	text-align: center;
	left: 0;
	top: 2px;
	
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.checkbox-1:after {
	position: absolute;
	content: '✔';
	font-family: 'Dosis', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
	color: #fff;
	left: 7px;
	top: 7px;
	
	transform: scale(0);
	
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

#someID:checked + .checkbox-1:after {
	transform: scale(1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.