Step-by-Step Guide to Creating a Stylish ON-OFF Toggle Switch with HTML and CSS
Welcome to Day 41 of the #100DaysOfCode Challenge! Today, we will learn how to create an elegant ON-OFF toggle switch using HTML and CSS. This toggle switch is perfect for incorporating a user-friendly design into your projects. Follow this step-by-step guide, complete with explanations, to build this sleek toggle switch.
Step 1: Setting Up the HTML Structure
First, let’s set up the HTML structure for our toggle switch. The HTML file includes the necessary meta tags, a link to an external CSS file, and the basic structure of the toggle switch.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding and viewport settings for responsive design -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to external CSS stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- Title of the web page -->
<title>ON-OFF Toggle Switch</title>
</head>
<body>
<!-- Container for the toggle switch -->
<div class="container">
<!-- Hidden checkbox input used to control the toggle switch state -->
<input hidden id="check" name="check" type="checkbox">
<!-- Label associated with the checkbox to style and control the toggle switch -->
<label class="toggle" for="check">
<!-- Circle element inside the toggle switch -->
<div class="toggle__circle"></div>
</label>
<!-- Text labels for the toggle switch -->
<div class="toggle-text">
<!-- Text for the 'N' (off) state -->
<span>N</span>
<!-- Text for the 'F' (on) state -->
<span>F</span>
</div>
</div>
</body>
</html>Explanation:
- Meta Tags: These ensure proper character encoding and responsive design.
- Link to CSS: Connects the HTML file to the external CSS file (
style.css). - Checkbox Input: The hidden checkbox will control the toggle switch state.
- Label and Circle: The label, linked to the checkbox, contains a circle element to represent the switch.
- Text Labels: Indicate the “N” (off) and “F” (on) states.
Step 2: Styling with CSS
Next, let’s add the CSS to style our toggle switch. The CSS file (style.css) will include styles for the body, container, toggle switch, and the switch states.
/* Import the 'Inter' font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* Reset default margin and padding for all elements, and set box-sizing to border-box */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style for the body element */
body {
/* Center content horizontally and vertically */
display: flex;
align-items: center;
justify-content: center;
/* Set minimum height to full viewport height */
min-height: 100vh;
/* Background gradient from top left to bottom right */
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
/* Apply the 'Inter' font family */
font-family: "Inter", sans-serif;
}
/* Style for the container div */
.container {
/* Center the container */
margin: auto;
/* Set text color */
color: hsl(0, 0%, 30%);
/* Set font weight and size */
font-weight: 900;
font-size: 6rem;
/* Use flexbox layout */
display: flex;
}
/* Style for the toggle switch label */
.toggle {
/* Set dimensions */
width: 60px;
height: 155px;
/* Background color and border radius */
background-color: hsl(0, 0%, 80%);
border-radius: 1.7rem;
/* Padding and cursor style */
padding: .25rem 0;
cursor: pointer;
/* Center content horizontally */
display: flex;
justify-content: center;
/* Smooth background color transition */
transition: background-color 300ms 300ms;
}
/* Style for the circle inside the toggle switch */
.toggle__circle {
/* Set dimensions */
width: 50px;
height: 50px;
/* Background color and border radius */
background-color: hsl(0, 0%, 95%);
border-radius: 50%;
/* Position the circle at the bottom of the toggle */
margin-top: calc(155px - (.25rem * 2) - 50px);
/* Smooth transition for the margin */
transition: margin 500ms ease-in-out;
}
/* Style for the text next to the toggle switch */
.toggle-text {
/* Use flexbox layout and vertical direction */
display: flex;
flex-direction: column;
/* Adjust line height */
line-height: .8;
}
/* Style when the checkbox is checked */
#check:checked+.toggle>.toggle__circle {
/* Move the circle to the top */
margin-top: 0;
}
/* Change background color of toggle when checked */
#check:checked+.toggle {
background-color: #41a63c;
}Explanation:
- Font Import: Import the “Inter” font from Google Fonts for a clean and modern look.
- Global Reset: Remove default margin and padding from all elements and set
box-sizingtoborder-box. - Body Styling: Center content both vertically and horizontally, set a full-height background gradient, and apply the “Inter” font family.
- Container Styling: Center the container, set the text color, font weight, and size, and use a flexbox layout.
- Toggle Label: Define the dimensions, background color, border radius, padding, cursor style, and transition effects for the toggle switch.
- Toggle Circle: Style the circle inside the toggle with dimensions, background color, border radius, and transition effects.
- Text Styling: Use a flexbox layout for the text labels, set a vertical direction, and adjust line height.
- Checkbox States: Define styles for when the checkbox is checked, moving the circle to the top and changing the background color of the toggle switch.
Conclusion
With these simple steps, you have created an elegant ON-OFF toggle switch using HTML and CSS. This toggle switch is perfect for modern web applications, providing a user-friendly interface for toggling states.
Full Source Code
Download the full source code for this project here.
Contact
Feel free to contact me for more projects and collaboration opportunities at bento.me/withaarzoo.
Happy coding! Keep up the great work on your #100DaysOfCode Challenge!
