Introduction:
In this tutorial, we’ll learn how to create a checkbox as a bulb using HTML and CSS. The checkbox will feature a unique design with smooth transitions, providing a delightful user experience. By the end of this tutorial, you’ll have a functional animated checkbox that you can use in your web projects to add an element of interactivity. So, let’s get started!
Things You Will Learn:
- How to create a custom-styled checkbox using HTML and CSS.
- Understanding the box model and its significance in designing elements.
- Implementing CSS transitions for smooth animations.
- Leveraging CSS pseudo-elements to enhance design elements.
Video Tutorial:
Before we dive into the tutorial, be sure to check out the video version of this tutorial on my YouTube channel.
Project Folder Structure:
Before we begin, let’s set up the project folder structure:
- index.html
- style.css
HTML:
In the index.html file, we’ll define the structure of our animated checkbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkbox As Bulb</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" id="bulb" />
<label for="bulb"></label>
</body>
</html>
Â
CSS:
Now, let’s bring life to our animated checkbox by adding styles in the style.css file:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
input[type="checkbox"] {
appearance: none;
position: absolute;
display: block;
height: 250px;
width: 250px;
background-color: #d0d5f4;
transform: translate(-50%, -50%);
top: calc(50% - 50px);
left: 50%;
border-radius: 50%;
cursor: pointer;
transition: 0.3s;
}
input[type="checkbox"]:before {
position: absolute;
content: "";
height: 100px;
width: 25px;
background-color: #b4b9f1;
bottom: 0;
margin: auto;
left: 0;
right: 0;
transition: 0.3s;
}
input[type="checkbox"]:after {
position: absolute;
content: "";
height: 30px;
width: 30px;
border: 25px solid #b4b9f1;
border-radius: 50%;
margin: auto;
left: 0;
right: 0;
bottom: 80px;
transition: 0.3s;
}
label {
position: absolute;
height: 110px;
width: 110px;
background-color: #08475e;
border-radius: 0 0 20px 20px;
transform: translate(-50%, -50%);
left: 50%;
top: calc(50% + 120px);
background: linear-gradient(#08475e 50%, #05303d 50%);
cursor: pointer;
}
label:before {
position: absolute;
content: "";
height: 50px;
width: 50px;
background-color: #05303d;
bottom: -20px;
margin: auto;
left: 0;
right: 0;
border-radius: 50%;
}
label:after {
position: absolute;
content: "";
height: 500px;
width: 250px;
background-color: rgba(255, 255, 255, 0.3);
bottom: -50px;
left: 55px;
}
input[type="checkbox"]:checked {
background-color: #ffd845;
}
input[type="checkbox"]:checked:before {
background-color: #ff8e00;
}
input[type="checkbox"]:checked:after {
border: 25px solid #ff8e00;
}
Â
Conclusion:
This tutorial taught us how to create a checkbox as a bulb using HTML and CSS. By customizing the checkbox’s appearance and adding smooth transitions, we crafted an eye-catching design that enhances the user experience. With the skills acquired in this tutorial, you can further explore the world of CSS animations and use them to add interactivity and visual appeal to your web projects. Remember to experiment with different styles and effects to create unique and stunning elements for your websites. Happy coding!
