Interactive Web Element: Sleek Toggle Button Using HTML and CSS

In the ever-evolving landscape of web development, user interaction is paramount. Designing intuitive and visually appealing elements can significantly enhance the user experience. In this tutorial, we'll unravel the intricacies of creating a stylish toggle button using HTML and CSS.

HTML Structure

Our journey begins with the HTML structure that lays the groundwork for our toggle button. It involves a checkbox input and a corresponding label, utilizing an SVG icon for added visual flair.

<div class="main-container">
    <input type="checkbox" id="toggle-btn" hidden>
    <label for="toggle-btn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path
                d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v224c0 17.7 14.3 32 32 32s32-14.3 32-32V32zm-144.5 88.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4 0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z" />
        </svg>
        <span>START</span>
    </label>
</div> 

• A div with the id main-container serves as the container for our toggle button. 
• An input of type checkbox with the id toggle-btn is used to create the toggle effect. 
• A label is associated with the checkbox using the for attribute. This label encompasses both an SVG icon and a text span, creating a visually appealing button.

Also Read: Jelly Button using HTML and CSS only

Here, the checkbox (#toggle-btn) remains hidden, and its state will be toggled by interacting with the visible label.

CSS Styling

Let's now dissect the CSS styling that transforms our HTML structure into an aesthetically pleasing and interactive toggle button.

.main-container {
    min-height: 100vh;
    min-width: 100px;
}

.main-container,
label {
    display: flex;
    justify-content: center;
    align-items: center;
}

label {
    gap: 3px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
    border-radius: 50%;
    font-family: 'calibri';
    flex-direction: column;
    background: rgb(99, 99, 99);
    border: 2px solid rgb(126, 126, 126);
    box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
}

label span {
    font-weight: bold;
    font-size: 8px;
    color: rgb(25 25 25 / 71%);
}

svg {
    width: 0.8em;
}

svg path {
    fill: rgb(25 25 25 / 71%);
}

#toggle-btn:checked+label {
    border: 2px solid #ffffff;
    background: #92b4b8;
    box-shadow: 0px 0px 1px #cbf9ff inset,
        0px 0px 2px #cbf9ff inset,
        0px 0px 10px #cbf9ff inset,
        0px 0px 40px #cbf9ff;
    transition: 0.3s;
}

#toggle-btn:checked+label path {
    fill: white;
}

#toggle-btn:checked+label span {
    color: white;
}

#toggle-btn:checked label {
    filter: drop-shadow(0px 0px 5px rgb(203 249 255));
} 

• Label Container Styling: The label CSS rules define the styles for the container that encompasses the toggle button. 
• Label Text Styling: The label span rules handle the appearance of the text within the label, in this case, "START." 
• SVG Icon Styling: Styles for the SVG icon, housed within the svg element, contribute to the overall visual appeal. 
• Checked State Styling: When the checkbox is checked (#toggle-btn:checked), we employ a series of rules to modify the appearance of the label, SVG path, and label text. This dynamic transformation enhances user feedback and interaction.

Functionality 

The checkbox is hidden (hidden attribute) but remains accessible for styling using its ID (#toggle-btn). The label is styled as a button, and its appearance changes when the associated checkbox is checked, thanks to the :checked pseudo-class. This design provides a visually pleasing toggle button with an SVG icon and accompanying text.

The combination of HTML and CSS creates a toggle button that visually responds to the user's interaction with a sleek and dynamic transition. The checkbox serves as a toggle switch, and its checked state triggers the corresponding styling changes, resulting in an engaging user interface element.

Download