Heart Toggle Switch with HTML and CSS
Creating a Heart Toggle Switch with HTML and CSS
In this tutorial, we’ll guide you through the process of creating an eye-catching heart-shaped toggle switch using HTML and CSS. The toggle switch will not only change its appearance but also become active when turned on and off. It’s a fun and creative way to add interactivity to your web projects. Here we have also given you HTML and CSS source code. So, let’s get started!
Heart Toggle Switch Preview;
Before we get into the code, let’s take a look at what we’ll be building:
The HTML Structure;
This is HTML Structure for creating the structure of Heart Toggle Switch.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Heart Toggle</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="love"> <input id="switch" type="checkbox"> <label class="love-heart" for="switch"> <i class="left"></i> <i class="right"></i> <i class="bottom"></i> <div class="round"></div> </label> </div> </body> </html>
The CSS Styles
Create a file named styles.css in the same directory as your HTML file and add the following CSS code:
/* Reset some default styles */ body, html { margin: 0; padding: 0; } /* Center the toggle switch on the page */ body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: rgb(60, 2, 104); } /* Hide the default checkbox and heart */ .love-heart:before, #switch { display: none; } /* Heart-shaped toggle switch styles */ .love-heart, .love-heart::after { /* Add border and dimensions */ border-color: hsl(231deg 28% 86%); border: 1px solid; border-top-left-radius: 100px; border-top-right-radius: 100px; width: 10px; height: 8px; border-bottom: 0; } /* Positioning for the animated round indicator */ .round { position: absolute; z-index: 1; width: 8px; height: 8px; background: hsl(0deg 0% 100%); box-shadow: rgb(0 0 0 / 24%) 0px 0px 4px 0px; border-radius: 100%; left: 0px; bottom: -1px; transition: all .5s ease; animation: check-animation2 .5s forwards; } /* Styles for when the toggle switch is checked */ input:checked + label .round { transform: translate(0px, 0px); animation: check-animation .5s forwards; background-color: hsl(0deg 0% 100%); } /* Keyframe animations for the round indicator */ @keyframes check-animation { 0% { transform: translate(0px, 0px); } 50% { transform: translate(0px, 7px); } 100% { transform: translate(7px, 7px); } } @keyframes check-animation2 { 0% { transform: translate(7px, 7px); } 50% { transform: translate(0px, 7px); } 100% { transform: translate(0px, 0px); } } /* Additional heart and checked styles */ .love-heart { /* Position and scaling for the heart shape */ box-sizing: border-box; position: relative; transform: rotate(-45deg) translate(-50%, -33px) scale(4); display: block; border-color: hsl(231deg 28% 86%); cursor: pointer; top: 0; } /* Styles for when the toggle switch is checked */ input:checked +.love-heart, input:checked +.love-heart::after, input:checked +.love-heart.bottom { border-color: hsl(347, 86%, 44%); box-shadow: inset 6px -5px 0px 2px hsl(347, 63%, 40%); } /* Styles for the bottom part of the heart */ .love-heart::after, .love-heart .bottom { content: ""; display: block; box-sizing: border-box; position: absolute; border-color: hsl(231deg 28% 86%); } /* Positioning and dimensions for the bottom part */ .love-heart::after { right: -9px; transform: rotate(90deg); top: 7px; } .love-heart .bottom { width: 11px; height: 11px; border-left: 1px solid; border-bottom: 1px solid; border-color: hsl(231deg 28% 86%); left: -1px; top: 5px; border-radius: 0px 0px 0px 5px; }
So, here is the HTML and CSS style code, the source code for creating the heart toggle switch. And if you want to learn HTML and CSS then our free Tutorial is available in website from where you can learn.
In short, the provided CSS code creates an interactive heart-shaped toggle switch with customized styling, animations, and responsive behavior. It combines various CSS techniques, including flexbox for layout, keyframe animations for dynamic movement, and pseudo-elements for creating heart shapes and animations. This code can be easily integrated into your web projects to add an entertaining and engaging element for users to interact with.
Conclusion;
Congratulations! You’ve successfully created a delightful heart-shaped toggle switch using HTML and CSS. This creative element can add a touch of interactivity and charm to your web projects. Feel free to customize the colors, animations, and dimensions to match your project’s design. You can integrate this toggle switch into various parts of your website, such as settings panels, forms, or interactive widgets. Happy coding!
Look Also;
0 Comments