Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a custom checkbox toggle. To build this toggle, we need HTML, CSS and Javascript.
If you want to learn how to create more of such customized checkboxes, you can check out this playlist here. This playlist consists of 15+ tutorials on how you can customize checkboxes with pure CSS.
Video Tutorial:
If you are interested in learning by coding along with a video tutorial, you can check out the video below. Also, subscribe to my youtube channel, where I post new tips, tricks and tutorials on web development regularly.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – ‘Custom Checkbox Toggle’. Inside this folder, we have two files. These files are index.html and style.css. The first file is the HTML document and the second one is the stylesheet.
HTML:
Let us start with the HTML code. The HTML code creates elements necessary to build to structure and layout of our project. First, copy the code below and paste it into your HTML document.
Our HTML code consists of a div with a class name wrapper. Inside the wrapper, we have another div with a class name container. This container contains the checkbox input element.
<!DOCTYPE html>
<html>
<head>
<title>Custom Checkbox Toggle</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<input type="checkbox" />
</div>
</div>
</body>
</html>
CSS:
We now style and customize this checkbox using CSS. Styling checkboxes isn’t as straightforward as changing background colour and borders. But with this tutorial, I will guide you step by step into creating a custom check checkbox toggle.
Now copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #221e27;
}
.wrapper {
height: 50vh;
background: linear-gradient(135deg, #8175fe, #89befe);
}
.container {
height: 21.8em;
width: 21.8em;
background-color: #2d2936;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.3em;
box-shadow: 0 2.5em 4.6em rgba(0, 0, 0, 0.3);
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
height: 5.6em;
width: 12.5em;
background-color: #000000;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
outline: none;
cursor: pointer;
transform: skewX(-7deg);
transition: 0.3s;
}
input[type="checkbox"]:before {
font-size: 1.5em;
content: "OFF";
position: absolute;
width: 3.75em;
height: 2.9em;
background-color: #2d2936;
color: #a0a0a0;
top: 0.42em;
left: 0.42em;
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
letter-spacing: 1px;
transition: 0.3s;
}
input[type="checkbox"]:checked {
background: linear-gradient(135deg, #8175fe, #89befe);
}
input[type="checkbox"]:checked:before {
content: "ON";
left: 4.1em;
color: #89befe;
}
That’s it for this tutorial. If you face issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys. So if you have any queries, suggestions or feedback you can comment below.
Happy Coding!
