CSS Toggle Switches ON OFF

Last Updated:

January 2, 2023

CSS Toggle on and off is a CSS way of toggling between two or more CSS classes or styling properties on a single element. This can be useful if you want to change the styling of an element based on some user interaction, like a button press or hover.

Toggle switches On Off

<div class="on-off-toggle-1">
	<input type="checkbox" checked />
	<label></label>
</div>

<div class="on-off-toggle-2">
	<input type="checkbox" checked />
	<label></label>
</div>

<div class="on-off-toggle-3">
	<input type="checkbox" checked />
	<label></label>
</div>

<div class="on-off-toggle-4">
	<input type="checkbox" checked />
	<label></label>
</div>

<div class="on-off-toggle-5">
	<input type="checkbox" checked />
	<label></label>
</div>

<div class="on-off-toggle-6">
	<input type="checkbox" checked />
	<label></label>
</div>

.on-off-toggle-1 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.on-off-toggle-1 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.on-off-toggle-1 label {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
}
.on-off-toggle-1 label:before {
  content: "";
  background: #ffa3a3;
  height: 32px;
  width: 94px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.on-off-toggle-1 label:after {
  content: "OFF";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 42px;
  height: 24px;
  z-index: 2;
  display: grid;
  place-content: center;
  font-family: arial;
  font-weight: bold;
  box-sizing: border-box;
  color: #fff;
  background: #ef3434;
  transition: 0.25s ease-in-out;
}

.on-off-toggle-1 input[type="checkbox"]:checked + label:before {
  background: #c0e7e3;
}
.on-off-toggle-1 input[type="checkbox"]:checked + label:after {
  content: "ON";
  background: #21bf73;
  transform: translatex(44px);
}

.on-off-toggle-2 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.on-off-toggle-2 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.on-off-toggle-2 label {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
}
.on-off-toggle-2 label:before {
  content: "";
  background: #ffa3a3;
  height: 18px;
  width: 84px;
  border-radius: 10px;
  box-shadow: inset 0 0.1em 0.03em #0002, inset 0 0.1em 0.3em #0003,
    0 0 2em #0006;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.on-off-toggle-2 label:after {
  content: "OFF";
  position: absolute;
  top: -6px;
  left: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  z-index: 2;
  display: grid;
  place-content: center;
  font-size: 12px;
  font-family: arial;
  font-weight: bold;
  box-sizing: border-box;
  color: #fff;
  background: #ef3434;
  box-shadow: -2px 2px 4px #0004;
  transition: 0.25s ease-in-out;
}
.on-off-toggle-2 input[type="checkbox"]:checked + label:before {
  background: #c0e7e3;
}
.on-off-toggle-2 input[type="checkbox"]:checked + label:after {
  content: "ON";
  background: #21bf73;
  transform: translatex(44px);
}

.on-off-toggle-3 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.on-off-toggle-3 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.on-off-toggle-3 input[type="checkbox"]:before,
.on-off-toggle-3 input[type="checkbox"]:after {
  content: "";
  background: #fff;
  width: 2px;
  height: 16px;
  position: absolute;
  left: 4px;
  top: 3px;
  transition: 0.25s ease-in-out;
  transform: translate(13px, 5px) rotate(45deg);
}
.on-off-toggle-3 input[type="checkbox"]:after {
  transform: translate(13px, 5px) rotate(-45deg);
}

.on-off-toggle-3 label {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
}

.on-off-toggle-3 label:before {
  content: "";
  background: #ccc;
  height: 36px;
  width: 85px;
  border-radius: 20px;
  border: 1px solid #ddd;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}

.on-off-toggle-3 label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  z-index: 2;
  display: grid;
  place-content: center;
  font-size: 20px;
  font-family: arial;
  font-weight: bold;
  box-sizing: border-box;
  color: #fff;
  background: #ef3434;
  transition: 0.25s ease-in-out;
}
.on-off-toggle-3 input[type="checkbox"]:checked:before {
  left: 54px;
  transform: translate(15px, 5px) rotate(45deg);
}
.on-off-toggle-3 input[type="checkbox"]:checked:after {
  transform: translate(8px, 12px) rotate(-45deg);
  height: 8px;
  left: 54px;
}
.on-off-toggle-3 input[type="checkbox"]:checked + label:before {
  background: #eee;
}
.on-off-toggle-3 input[type="checkbox"]:checked + label:after {
  background: #21bf73;
  transform: translatex(51px);
}

.on-off-toggle-4 {
  position: relative;
  height: 42px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.on-off-toggle-4 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.on-off-toggle-4 label {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
}
.on-off-toggle-4 label:before,
.on-off-toggle-4 label:after {
  font-size: 18px;
  font-weight: bold;
  font-family: arial;
  transition: 0.2s ease-in;
  box-sizing: border-box;
}
.on-off-toggle-4 label:before {
  content: "Yes";
  background: #fff;
  color: #000;
  height: 42px;
  width: 140px;
  display: inline-flex;
  align-items: center;
  padding-left: 15px;
  border-radius: 30px;
  border: 1px solid #eee;
  box-shadow: inset 140px 0px 0 0px #000;
}
.on-off-toggle-4 label:after {
  content: "No";
  position: absolute;
  left: 100px;
  line-height: 42px;
  top: 0;
  color: #fff;
}
.on-off-toggle-4 input[type="checkbox"]:checked + label:before {
  color: #000;
  box-shadow: inset 0px 0px 0 0px #000;
}
.on-off-toggle-4 input[type="checkbox"]:checked + label:after {
  color: #fff;
}

.on-off-toggle-5 {
  position: relative;
  width: 90px;
}
.on-off-toggle-5:before,
.on-off-toggle-5:after {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 32px;
  line-height: 32px;
  font-weight: 600;
  font-size: 12px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.on-off-toggle-5:before {
  content: "ON";
  left: 10px;
  color: #266c33;
}
.on-off-toggle-5:after {
  content: "OFF";
  right: 10px;
  color: #90201f;
}
.on-off-toggle-5 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.on-off-toggle-5 label {
  position: relative;
  display: flex;
  align-items: center;
}
.on-off-toggle-5 label:before {
  content: "";
  background: #fff;
  height: 32px;
  box-shadow: 0 0 1px 2px #0002;
  width: 90px;
  display: inline-block;
  transition: 0.1s linear;
}
.on-off-toggle-5 label:after {
  content: "";
  position: absolute;
  background-color: #e3666c;
  background-size: 100%;
  border-radius: 0;
  width: 45px;
  height: 32px;
  left: 0;
  top: 0;
  z-index: 5;
  transition: 0.1s linear;
}
.on-off-toggle-5 input[type="checkbox"]:checked + label:after {
  background: #4bd865;
  left: 45px;
}

.on-off-toggle-6 {
  position: relative;
  box-sizing: border-box;
}
.on-off-toggle-6 input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.on-off-toggle-6 label {
  position: relative;
  display: block;
  color: #4bd865;
  box-sizing: border-box;
}
.on-off-toggle-6 label:first-line {
  color: #ccc;
}
.on-off-toggle-6 label:before {
  content: "FF N";
  font-family: arial;
  font-size: 24px;
  font-weight: 800;
  width: 50px;
  height: 60px;
  display: block;
  box-sizing: border-box;
  padding-left: 28px;
  padding-top: 3px;
  margin-right: 10px;
  line-height: 28px;
  background-image: radial-gradient(circle 13px, #eee 100%, transparent 0),
    radial-gradient(circle 13px, #eee 100%, transparent 0),
    linear-gradient(#eee, #eee);
  background-repeat: no-repeat;
  background-size: auto auto, auto auto, 26px 28px;
  background-position: -12px -15px, -12px 15px, 0px 15px;
  transition: 0.2s ease-in;
}
.on-off-toggle-6 label:after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 4px solid #bbb;
  border-radius: 50%;
  left: 2px;
  top: 5px;
  z-index: 2;
  box-sizing: border-box;
  transition: 0.2s ease-in;
}
.on-off-toggle-6 input[type="checkbox"]:checked + label:after {
  top: 33px;
  border-color: #4bd865;
}

.on-off-toggle-1 {
	position: relative;
	height: 32px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		cursor: pointer;
		opacity: 0;
		&:checked {
			+ {
				label {
					&:before {
						background: #c0e7e3;
					}
					&:after {
						content: "ON";
						background: #21bf73;
						transform: translatex(44px);
					}
				}
			}
		}
	}
	label {
		position: relative;
		display: flex;
		height: 100%;
		align-items: center;
		box-sizing: border-box;
		&:before {
			content: "";
			background: #ffa3a3;
			height: 32px;
			width: 94px;
			position: relative;
			display: inline-block;
			box-sizing: border-box;
			transition: 0.2s ease-in;
		}
		&:after {
			content: "OFF";
			position: absolute;
			top: 4px;
			left: 4px;
			width: 42px;
			height: 24px;
			z-index: 2;
			display: grid;
			place-content: center;
			font-family: arial;
			font-weight: bold;
			box-sizing: border-box;
			color: #fff;
			background: #ef3434;
			transition: 0.25s ease-in-out;
		}
	}
}
.on-off-toggle-2 {
	position: relative;
	height: 32px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		cursor: pointer;
		opacity: 0;
		&:checked {
			+ {
				label {
					&:before {
						background: #c0e7e3;
					}
					&:after {
						content: "ON";
						background: #21bf73;
						transform: translatex(44px);
					}
				}
			}
		}
	}
	label {
		position: relative;
		display: flex;
		height: 100%;
		align-items: center;
		box-sizing: border-box;
		&:before {
			content: "";
			background: #ffa3a3;
			height: 18px;
			width: 84px;
			border-radius: 10px;
			box-shadow: inset 0 0.1em 0.03em #0002, inset 0 0.1em 0.3em #0003, 0 0 2em #0006;
			position: relative;
			display: inline-block;
			box-sizing: border-box;
			transition: 0.2s ease-in;
		}
		&:after {
			content: "OFF";
			position: absolute;
			top: -6px;
			left: 0;
			width: 42px;
			height: 42px;
			border-radius: 50%;
			z-index: 2;
			display: grid;
			place-content: center;
			font-size: 12px;
			font-family: arial;
			font-weight: bold;
			box-sizing: border-box;
			color: #fff;
			background: #ef3434;
			box-shadow: -2px 2px 4px #0004;
			transition: 0.25s ease-in-out;
		}
	}
}
.on-off-toggle-3 {
	position: relative;
	height: 32px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		&:before {
			content: "";
			background: #fff;
			width: 2px;
			height: 16px;
			position: absolute;
			left: 4px;
			top: 3px;
			transition: 0.25s ease-in-out;
			transform: translate(13px, 5px) rotate(45deg);
		}
		&:after {
			content: "";
			background: #fff;
			width: 2px;
			height: 16px;
			position: absolute;
			left: 4px;
			top: 3px;
			transition: 0.25s ease-in-out;
			transform: translate(13px, 5px) rotate(45deg);
			transform: translate(13px, 5px) rotate(-45deg);
		}
		&:checked {
			&:before {
				left: 54px;
				transform: translate(15px, 5px) rotate(45deg);
			}
			&:after {
				transform: translate(8px, 12px) rotate(-45deg);
				height: 8px;
				left: 54px;
			}
			+ {
				label {
					&:before {
						background: #eee;
					}
					&:after {
						background: #21bf73;
						transform: translatex(51px);
					}
				}
			}
		}
	}
	label {
		position: relative;
		display: flex;
		height: 100%;
		align-items: center;
		box-sizing: border-box;
		&:before {
			content: "";
			background: #ccc;
			height: 36px;
			width: 85px;
			border-radius: 20px;
			border: 1px solid #ddd;
			position: relative;
			display: inline-block;
			box-sizing: border-box;
			transition: 0.2s ease-in;
		}
		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 2px;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			z-index: 2;
			display: grid;
			place-content: center;
			font-size: 20px;
			font-family: arial;
			font-weight: bold;
			box-sizing: border-box;
			color: #fff;
			background: #ef3434;
			transition: 0.25s ease-in-out;
		}
	}
}
.on-off-toggle-4 {
	position: relative;
	height: 42px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		cursor: pointer;
		opacity: 0;
		&:checked {
			+ {
				label {
					&:before {
						color: #000;
						box-shadow: inset 0px 0px 0 0px #000;
					}
					&:after {
						color: #fff;
					}
				}
			}
		}
	}
	label {
		position: relative;
		display: flex;
		height: 100%;
		align-items: center;
		box-sizing: border-box;
		&:before {
			font-size: 18px;
			font-weight: bold;
			font-family: arial;
			transition: 0.2s ease-in;
			box-sizing: border-box;
			content: "Yes";
			background: #fff;
			color: #000;
			height: 42px;
			width: 140px;
			display: inline-flex;
			align-items: center;
			padding-left: 15px;
			border-radius: 30px;
			border: 1px solid #eee;
			box-shadow: inset 140px 0px 0 0px #000;
		}
		&:after {
			font-size: 18px;
			font-weight: bold;
			font-family: arial;
			transition: 0.2s ease-in;
			box-sizing: border-box;
			content: "No";
			position: absolute;
			left: 100px;
			line-height: 42px;
			top: 0;
			color: #fff;
		}
	}
}
.on-off-toggle-5 {
	position: relative;
	width: 90px;
	&:before {
		position: absolute;
		top: 0;
		z-index: 1;
		height: 32px;
		line-height: 32px;
		font-weight: 600;
		font-size: 12px;
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
		content: "ON";
		left: 10px;
		color: #266c33;
	}
	&:after {
		position: absolute;
		top: 0;
		z-index: 1;
		height: 32px;
		line-height: 32px;
		font-weight: 600;
		font-size: 12px;
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
		content: "OFF";
		right: 10px;
		color: #90201f;
	}
	input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		cursor: pointer;
		opacity: 0;
		&:checked {
			+ {
				label {
					&:after {
						background: #4bd865;
						left: 45px;
					}
				}
			}
		}
	}
	label {
		position: relative;
		display: flex;
		align-items: center;
		&:before {
			content: "";
			background: #fff;
			height: 32px;
			box-shadow: 0 0 1px 2px #0002;
			width: 90px;
			display: inline-block;
			transition: 0.1s linear;
		}
		&:after {
			content: "";
			position: absolute;
			background-color: #e3666c;
			background-size: 100%;
			border-radius: 0;
			width: 45px;
			height: 32px;
			left: 0;
			top: 0;
			z-index: 5;
			transition: 0.1s linear;
		}
	}
}
.on-off-toggle-6 {
	position: relative;
	box-sizing: border-box;
	input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		cursor: pointer;
		opacity: 0;
		&:checked {
			+ {
				label {
					&:after {
						top: 33px;
						border-color: #4bd865;
					}
				}
			}
		}
	}
	label {
		position: relative;
		display: block;
		color: #4bd865;
		box-sizing: border-box;
		&:first-line {
			color: #ccc;
		}
		&:before {
			content: "FF N";
			font-family: arial;
			font-size: 24px;
			font-weight: 800;
			width: 50px;
			height: 60px;
			display: block;
			box-sizing: border-box;
			padding-left: 28px;
			padding-top: 3px;
			margin-right: 10px;
			line-height: 28px;
			background-image: radial-gradient(circle 13px, #eee 100%, transparent 0), radial-gradient(circle 13px, #eee 100%, transparent 0), linear-gradient(#eee, #eee);
			background-repeat: no-repeat;
			background-size: auto auto, auto auto, 26px 28px;
			background-position: -12px -15px, -12px 15px, 0px 15px;
			transition: 0.2s ease-in;
		}
		&:after {
			content: "";
			position: absolute;
			width: 22px;
			height: 22px;
			border: 4px solid #bbb;
			border-radius: 50%;
			left: 2px;
			top: 5px;
			z-index: 2;
			box-sizing: border-box;
			transition: 0.2s ease-in;
		}
	}
}

CSS Toggle Switches with Icon

CSS Toggle Switches

CSS Toggle Switches ON OFF

Toggle switches On Off

Related Snippets