Smooth Slide On/Off Text-Based Toggle Switch Using HTML and CSS (Free Source Code)
An elegant and interactive component to add to your web site is Smooth Slide On/Off Text Based Toggle Switch, which uses HTML and CSS to achieve that result.
The slider is used as a toggle switch having a smooth sliding animation with obvious ‘on’ and ‘off’ text indicators in jaunty letterforms, making it intuitively as well as visually compelling. To offer you free source code written to appropriate programming standards it is very easy to add to your project.
GitHub Source: Smooth Slide On/Off Text-Based Toggle Switch
Features
- Transition Effect: The slide of a switch is very smooth with a refined transition effect.
- Clear Text Indicators: Displays easy-to-read “on” and “off” labels for instant user feedback.
- Responsive Design: Adjusts perfectly across devices for a consistent user experience.
- Easy Customisable Style: With some simple tweaks, make colors, size and shadows in order to match the theme of your website.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- Simple Green Slider Toggle Switch
- Responsive 3D Toggle Switch
- Animated Robot Toggle Switch
- Retro-Style Power Toggle Switch
- Modern Toggle Switch with Sun & Moon Animation
Video Tutorial
Steps to Build Toggle Switch
Simply copy the provided HTML code to your site and add the CSS to the stylesheet. Users can customize the styling as per their design needs by changing the CSS variables.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!-- Developed by Shokat Javed available at www.jvcodes.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Slide On/Off Text-Based Toggle Switch - JV Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- From Uiverse.io by andrew-demchenk0 -->
<label class="switch">
<input checked="" type="checkbox" class="toggle">
<span class="slider"></span>
<span class="card-side"></span>
</label>
</body>
</html>
CSS
Here is the complete code for style.css file to style the Toggle Switch:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #a8a8a8;
}
/* From Uiverse.io by andrew-demchenk0 */
.switch {
--input-focus: #2d8cf0;
--bg-color: #fff;
--bg-color-alt: #666;
--main-color: #323232;
--input-out-of-focus: #ccc;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
width: 70px;
height: 36px;
transform: translateX(calc(50% - 10px));
}
.toggle {
opacity: 0;
}
.slider {
box-sizing: border-box;
border-radius: 100px;
border: 2px solid var(--main-color);
box-shadow: 4px 4px var(--main-color);
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--input-out-of-focus);
transition: 0.3s;
}
.slider:before {
content: "off";
box-sizing: border-box;
height: 30px;
width: 30px;
position: absolute;
left: 2px;
bottom: 1px;
border: 2px solid var(--main-color);
border-radius: 100px;
background-color: var(--bg-color);
color: var(--main-color);
font-size: 14px;
font-weight: 600;
text-align: center;
line-height: 25px;
transition: 0.3s;
}
.toggle:checked + .slider {
background-color: var(--input-focus);
transform: translateX(-32px);
}
.toggle:checked + .slider:before {
content: "on";
transform: translateX(32px);
}
Download Source Code
A copy of this free source code is available for download from the button below under no copyright restrictions. The script is ready to be used for personal or commercial projects with an easy to integrate path.
Conclusion
Use this code in your websites to enhance user interaction and add a modern touch to your design.
Remember to credit JV Source Codes by linking back, subscribe for more free resources, and if you have any questions or run into issues, please leave a comment, and I will be happy to reply.
