How to Create An Animated Toggle Switch with CSS

In this tutorial, we'll walk through creating an animated toggle switch with CSS. The switch will first appear in an inactive state. Once clicked, the notch will animate to the right and the switch background will fade to a different color.

Toggle switches are the perfect solution when setting preferences within a website or web application. They're a great replacement when choosing between two opposing states, and provide a cleaner user interface than using your standard radio buttons or checkboxes.

Here is an example of the switch we're going to create in action:

The HTML

First, let's start with the HTML code:

<div class="switch">
	<div class="notch"></div>
</div>

This code shows a parent element with class switch and a child element with class notch. The switch is the outer container with the background color to show the current state of the switch, and the notch changes position when the switch is clicked by the user.

The CSS

The CSS is where the true magic happens! First, let's create the rules for the outer container:

div.switch {
	width: 75px;
	height: 36px;
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	background-color: #777;
	position: relative;
	cursor: pointer;
	transition: 0.30s all ease-in-out;
	-moz-transition: 0.30s all ease-in-out;
	-webkit-transition: 0.30s all ease-in-out;
}

div.switch.active {
	background-color: #32b64e;
}

Here, we're creating our outer shell of the switch with a fixed width and height, and a rounded edge. The background color will be a bit darker by default to show as inactive. We're also making sure to define the position as relative to ensure the notch element is positioned within the switch element and not outside. Finally, we're setting an animation speed of 300 milliseconds for the background color fade. When the switch is changed to an active state, the background color will fade to green.

Next, we have the notch element, which is the circle that animates from left to right and vice versa depending on the switch's current state:

div.switch div.notch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background-color: #f0f0f0;
	position: absolute;
	top: 3px;
	left: 3px;
	transition: 0.15s all ease-in-out;
	-moz-transition: 0.15s all ease-in-out;
	-webkit-transition: 0.15s all ease-in-out;
}

div.switch.active div.notch {
	left: 42px;
}

As you can see here, the notch is also defined with a fixed width and height, and is rounded. We're setting the position near the top left of the switch and setting an animation speed to half the speed of the switch. This was done so that you could see both animations happen more uniformly.

The jQuery

To activate or deactivate the switch, we'll just create a quick event handler:

$(document).on("click", "div.switch", function() {
	$(this).toggleClass("active");
});

When clicked, the active class is toggled on the switch element. This class determines which animation to perform using the defined CSS rules above.