INTRODUCTION
NO MORE BORING CHECKBOXES
Welcome to a tutorial on how to create a simple pure CSS toggle button. Are those “default checkboxes” too boring for you? Want to create a better on/off toggle button? They are actually pretty easy, and we can do it with just pure CSS – Read on to find out how!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Step 1 | Step 2 | Step 3 |
Extra | Closing |
STEP 1
THE HTML
First, let us start with the very basics of how to create a toggle button – The HTML mechanics behind it.
THE HTML
CSS Toggle Button Demo
Yep, the custom toggle button is pretty much just a “regular” checkbox:
- Start by creating the
. - Put the
and a sliderinside.
That’s all we need.
STEP 2
THE CSS
Next, we move on to the CSS that will do the magic of transforming a “default” checkbox into a toggle button.
CSS MAGIC & RESULT
/* Hide default input */
.toggle input {
display: none;
}
/* The container and background */
.toggle {
position: relative;
display: inline-block;
width: 80px;
height: 30px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bc2612;
border: 1px solid #aaa;
border-radius: 5px;
transition: all 0.4s;
}
/* The sliding button */
.slider:before {
position: absolute;
content: "";
width: 38px;
height: 24px;
left: 2px;
top: 2px;
background-color: #eee;
border-radius: 5px;
transition: all 0.4s;
}
/* On checked */
input:checked + .slider {
background-color: #8cbc13;
}
input:checked + .slider:before {
transform: translateX(40px);
}Holy cow. Just how does this CSS magic work?
- First, we hide the “default” checkbox with
display: none– Since we do not need it, and it will still work as usual by clicking on the label. - We “shape” the
container with a fixed width and height, also give it aposition: relativeso that we can properly position the slider inside. - Next, we play with the
, “filling” it into thewithposition: absolute. Also, giving it a background color and borders – Feel free to change those colors to your liking. - To create the “button” for the slider, we use the
.slider:beforeselector to create the “square”. - Finally, we use
input:checked + .sliderandinput:checked + .slider:beforeto change the appearance when the button is toggled. input:checked + .slidersimply changes the background color.input:checked + .slider:before“shifts” the button to the right with atranslateXtransformation.
STEP 3
MORE COSMETICS
Actually, we already have a fully functioning toggle button at this stage. But this step is kind of an alternative for those of you who want to further style the button – All we need is to change a few lines of CSS code.
ADDING TEXT
/* "OFF" Text */
.slider:after {
position: absolute;
content: "OFF";
top: 6px;
right: 5px;
color: #fff;
font-size: 0.9em;
}
/* "ON" Text */
input:checked + .slider:after {
content: "ON";
left: 10px;
}
To add an “on/off” text (or whatever you want) to the button:
- We can use the
.slider:afterselector to create the text withcontent… Although some precision positioning is required. - Similar to the button, we use
input:checked + .slider:afterto change the text when the button is toggled – Change the text from “OFF” to “ON”.
ROUND BUTTONS
/* Hide default input */
.toggle input {
display: none;
}
/* The container and background */
.toggle {
position: relative;
display: inline-block;
width: 68px;
height: 30px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bc2612;
border: 1px solid #aaa;
border-radius: 30px;
transition: all 0.4s;
}
/* The sliding button */
.slider:before {
position: absolute;
content: "";
width: 24px;
height: 24px;
left: 2px;
top: 2px;
background-color: #eee;
border-radius: 24px;
transition: all 0.4s;
}
/* On checked */
input:checked + .slider {
background-color: #8cbc13;
}
input:checked + .slider:before {
transform: translateX(37px);
}To create a smoothly rounded button, all we actually need is to define a border-radius that is at least half the size of the height (or the lazy way is to define a radius equal to the height). In the case of this toggle button, there are 2 places that we need to set:
- The edges of the
.slidercontainer. - The “square button” in
.slider:before.
EXTRA
DOWNLOAD & MORE
That’s all for the code, and here is the download link as promised – Plus a small extra that may be useful to you.
CHECKING IF TOGGLED
CSS Toggle Button Demo
function check () {
var checkbox = document.getElementById("dabox");
if (checkbox.checked) {
alert("CHECKED");
} else {
alert("NOT CHECKED");
}
}How can we check if the button is toggled? Very simply, use it like any other checkboxes.
- Give the checkbox an id, so we can find it easily with Javascript.
- Simply access the
.checkedproperty in Javascript, and that’s it.
MORE CUSTOM CHECKBOXES
Looking for more ways to customize your checkboxes? Check out my other guide:
3 Steps Simple Pure CSS Custom Checkbox
SOURCE 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.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!
The post 3 Steps Simple Pure Css Toggle Button appeared first on Code Boxx.
