How to Create a Toggle Switch using CSS

Submitted by alpha_luna on Monday, September 19, 2016 - 11:34.

In this tutorial, we are going to learn how to create a Toggle Switch using CSS. We are going to use pure CSS to create a simple toggle switch button to your web page. We have a simple checkbox to filter any data, for the replacing of the checkbox, we are going to upgrade from checkbox GUI to toggle switch button GUI. It will add a neat and clean for the user if they are going to use the toggle switch functionality. You can provide a better user experience on the web page, in that case, we are going to display the toggle switch button instead for the checkbox. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

Create Simple Switch Checkbox Kindly add this following HTML source code where do you want to display it. Copy and paste to the BODY tag of your web page.

<div style="margin-top:100px; line-height:20px;">
<h1>
        Toggle Switch using CSS
</h1>
<br />
<h2>Example I</h2>
<label class="toggle_switch_BTN">
    <input type="checkbox" name="switch" id="switch" checked="checked">
    <div class="slide_BTN">Switch On</div>
</label>
 
<label class="toggle_switch_BTN">
    <input type="checkbox" name="switch" id="switch">
    <div class="slide_BTN">Switch On</div>
</label>
<br />
<br />
<h2>Example II</h2>
<label class="toggle_switch_BTN">
    <input type="checkbox" name="switch" id="switch" checked="checked">
    <div class="slide_BTN round_style_BTN">Switch On</div>
</label>
 
<label class="toggle_switch_BTN">
    <input type="checkbox" name="switch" id="switch">
    <div class="slide_BTN round_style_BTN">Switch On</div>
</label>
</div>

Output

For the full source code, kindly click the "Download Code" button below.

Learn by Examples

Examples are better than thousands of words. Examples are often easier to understand than text explanations. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.