Create Animated Mobile Phone Buttons Using Only HTML and CSS

Create animated mobile phone button checkboxes just like the ones pictured here. To create custom checkboxes, follow this link.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Custom Checkboxes</title>
	<style>
	body {
		font-family: sans-serif;
		background-color: #eee;
		color: #333;
		padding: 25px;
	}
	input[type="checkbox"] {
		position: absolute;
		margin: 0;
		width: 52px;
		height: 30px;
		opacity: 0;
	}
		input[type="checkbox"] + label {
			box-sizing: border-box;
			display: inline-block;
			border: 1px solid transparent;
			height: 28px;
			width: 52px;
			background: #b8b8b8;
			border-radius: 14px;
		}
		input[type="checkbox"] + label > * {
			display: inline-block;
			height: 100%;
			vertical-align: top;
			transition: width .1s;
		}
		input[type="checkbox"] + label .toggle {
			background: #fbfbfb;
			width: 28px;
			border-radius: 50%;
			/*transform: scale(1.25);*/
			/*box-shadow: 0 2px 5px rgba(0,0,0,0.25);*/
		}
		input[type="checkbox"]:checked + label {
			background: limegreen;
		}
		input[type="checkbox"] + label .unchecked {
			width: 22px;
		}
		input[type="checkbox"] + label .checked {
			width: 0;
		}
		input[type="checkbox"]:checked + label .unchecked {
			width: 0;
		}
		input[type="checkbox"]:checked + label .checked {
			width: 22px;
		}
	</style>
</head>
<body>
	<main>
		<form action="#" method="post">
			<input type="checkbox" name="check1" id="check1" />
			<label for="check1">
				<span class="checked"></span><span class="toggle"></span><span class="unchecked"></span>
			</label>
			<input type="checkbox" name="check2" id="check2" />
			<label for="check2">
				<span class="checked"></span><span class="toggle"></span><span class="unchecked"></span>
			</label>
		</form>
	</main>
</body>
</html>

Coding Video

https://youtu.be/mSpMz3EXCS4