How to Create A Toggle Switch Using Html And CSS

How-to-Create-A-Toggle-Switch-Using-Html-And-CSS
761 Views

we will guide you through the process of creating a toggle switch using HTML and CSS. Toggle switches are commonly used in web development to provide users with a convenient way to turn on or off certain features or options.

By the end of this tutorial, you will have a solid understanding of how to create a stylish and functional toggle switch that you can incorporate into your own web projects. So, let’s get started!

How to Create A Toggle Switch Using Html And CSS

Custom Switch Html And Css

To begin, let’s set up the basic HTML structure for our toggle switch.

<div class="cxc-main-warap">  
		<label class="cxc-switch-btn">
			<input type="checkbox">
			<div class="cxc-slide cxc-round">Filter On</div>
		</label>

		<label class="cxc-switch-btn">
			<input type="checkbox">
			<div class="cxc-slide">Filter On</div>
		</label>
	</div>

Custom Switch Html And Css With Rounded Style Toggle Switch

Now that we have the basic HTML structure in place, it’s time to add some CSS styles to make our toggle switch visually appealing. We will use CSS to customize the appearance of the switch in both its on and off states, as well as add smooth transition effects when the switch is toggled.

<style type="text/css">
		.cxc-switch-btn {
			position: relative;
			display: inline-block;
			width: 110px;
			height: 34px;
		}
		.cxc-switch-btn input {display:none;}
		.cxc-slide {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ffbc66;
			-webkit-transition: .4s;
			transition: .4s;
			padding: 4px;
			color: #fff;
		}
		.cxc-slide:before {
			position: absolute;
			content: "";
			height: 26px;
			width: 26px;
			left: 78px;
			bottom: 4px;
			background-color: white;
			-webkit-transition: .4s;
			transition: .4s;
		}


		input:checked + .cxc-slide {
			background-color: #587052;
			padding-left: 45px;
		}
		input:focus + .cxc-slide {
			box-shadow: 0 0 1px #01aeed;
		}
		input:checked + .cxc-slide:before {
			-webkit-transform: translateX(26px);
			-ms-transform: translateX(26px);
			transform: translateX(26px);
			left: -20px;
		}	

		/* Round Style Start  */
		.cxc-slide.cxc-round {
			border-radius: 34px;
		}
		.cxc-slide.cxc-round:before {
			border-radius: 50%;
		}
		/* Round Style End  */
		
	</style>

Conclusion

In this blog post, we have covered the step-by-step process of creating a toggle switch using HTML and CSS. By following the instructions provided, you should now have a fully functional toggle switch that you can use in your web projects.

Also, read

Was this article helpful?
YesNo

Leave a comment

Your email address will not be published. Required fields are marked *