Create Animated Mobile Phone Buttons Using Only HTML and CSS

Create animated iPhone/smartphone toggle button checkboxes or radio buttons. To create custom checkboxes/radio buttons, 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>Toggle Button Checkboxes</title>
	<style>
	body {
		background-color: #e8e8e8;
		color: #333;
	}
	main {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.togglebtn {
		position: absolute;
		margin: 0;
		width: 52px;
		height: 30px;
		opacity: 0;
	}
		.togglebtn + label {
			position: relative;
			box-sizing: border-box;
			display: inline-block;
			border: 1px solid #ccc;
			height: 28px;
			width: 52px;
			background-color: #e8e8e8;
			border-radius: 14px;
		}
		.togglebtn + label > b {
			position: absolute;
			display: inline-block;
			height: 100%;
			vertical-align: top;
			transition: margin-left .1s;
			background-color: #fbfbfb;
			width: 28px;
			border-radius: 50%;
			box-shadow: 0 3px 3px rgba(0,0,0,0.25);
			margin-left: 0;
			left: 0;
		}
	.togglebtn:checked + label {
		background-color: limegreen;
	}
	.togglebtn:checked + label > b {
		margin-left: 22px;
	}
	@media (prefers-color-scheme: dark) {
		body {
			background-color: #333;
			color: #f8f8f8;
		}
		.togglebtn + label {
			border-color: #555;
			background-color: #555;
		}
	}
	</style>
</head>
<body>
	<main>
		<form action="#" method="post">
		<div>
			<input type="checkbox" name="check1" id="check1" class="togglebtn" />
			<label for="check1">
				<b></b>
			</label>
		</div>
		<div>
			<input type="checkbox" name="check2" id="check2" class="togglebtn" /><label for="check2"><b></b></label>
		</div>
		<div>
			<input type="checkbox" name="check3" id="check3" class="togglebtn" /><label for="check3"><b></b></label>
		</div>
		</form>
	</main>
</body>
</html>

Coding Video

https://youtu.be/zOrF_hqHQf4

Another Version

Make all the checkboxes or radio buttons toggle buttons by specifying the HTML element instead of a CSS class as was done above.

<!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-color: #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-color: #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-color: 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