Toggle Button With Pure HTML CSS (Simple Example)

Welcome to a tutorial on how to create a simple custom toggle button with pure HTML and CSS. Want to create a custom toggle button without loading an entire framework? Yes, it is possible with some clever CSS – Read on for the example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

CUSTOM TOGGLE BUTTON DEMO

 

 

HTML CSS CUSTOM TOGGLE BUTTON

All right, let us now get into the details of how to create a custom toggle button using pure HTML and CSS only.

 

PART 1) THE HTML

toggle.html
<input class="tog" type="checkbox" id="demo">
<label class="tog" for="demo"></label>

Yep, that’s all we need. Just a “regular” checkbox and label.

 

PART 2) TOGGLE BUTTON CONTAINER

toggle.css

This one should be pretty self-explanatory. We turn the label into the “grey background” of our custom toggle button.

 

 

PART 3) INNER SWITCH

toggle.css

Then, use to create the “inner square switch”.

 

PART 4) TOGGLE MECHANICS

toggle.css

With the above “outer container” and “inner switch”, we already have a “static toggle button”. To complete the toggling mechanism:

  • (C1) We hide the default checkbox. Yes, it will still work when we click on the label (custom toggle switch).
  • (C2) When the checkbox is checked, we shift the “inner switch” to the right side.
  • (C3) Also, change the color of the custom toggle button.

That’s all.

 

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

HOW TO CHECK IF TOGGLED

Even though the checkbox is hidden, it still works as it is.

  • Give the checkbox a name and submit it as it is – <input type="checkbox" name="FOO">
  • Or in Javascript – if (document.getElementById("demo").checked) { ... }

 

EXTRA) ROUNDED TOGGLE BUTTON

Just set a border radius on the container and “inner switch”.

 

EXTRA) ON/OFF TEXT INDICATOR

You can set text on the “inner switch”.

 

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Pure HTML CSS Custom Toggle Button (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “Toggle Button With Pure HTML CSS (Simple Example)”

Leave a Comment

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