Simple Toggle Switch - Vanilla CSS

Discover how to implement Toggle Switch functionality using only HTML and Pure CSS, providing a lightweight and efficient solution for adding interactive switches to your website. Toggle switches offer a convenient way for users to toggle between two states, such as enabling or disabling a feature, without relying on JavaScript dependencies.

With HTML and Pure CSS, you can create customized toggle switch effects without the need for additional scripting languages, resulting in faster loading times and improved performance. Tailor the appearance, size, and behavior of your toggle switches using CSS styles and attributes, allowing for seamless integration with your website's design language.

Implementing toggle switches with HTML and Pure CSS is straightforward, making it accessible to developers of all skill levels. Simply define the switch structure within HTML elements and apply CSS styles to create the desired toggle appearance and behavior. With minimal code and dependencies, you can easily customize toggle switches to suit your website's needs and enhance user interaction.

Enhance user experience and usability on your website by incorporating sleek and visually appealing toggle switches using HTML and Pure CSS. Provide users with intuitive controls for toggling between different states, improving navigation and interaction with your website's features and functionalities.

Steps to Copy the Code

Creating a customized Toggle Switch with HTML and CSS is made simple with our comprehensive guide. Follow these steps to copy the code and personalize it to match your website's design:

Copy the Code: Start by copying the HTML and CSS code for the Toggle Switch component from our guide or relevant documentation.
Paste into Your Project: Open your project files in a code editor and paste the copied HTML and CSS code into the appropriate files. Paste the HTML code into your HTML file at the desired location where you want the Toggle Switch to appear. Paste the CSS code into your CSS file.
- After copying the HTML and CSS code for the Toggle Switch component into your project files, ensure that you properly link the CSS file containing the Toggle Switch styles to your HTML files.
- To link the CSS file, add the following line within the <head> section of your HTML file:
- Replace "styles.css" with the path to your CSS file containing the Toggle Switch styles. This will apply the custom styles to the Toggle Switch component as defined in the CSS file.
Customize as Needed: HTML and CSS provide flexibility for customizing the appearance and behavior of your Toggle Switch. Modify the code to match your design preferences, such as adjusting colors, sizes, and styles for the toggle button and switch track.
Test and Refine: After making modifications, thoroughly test the Toggle Switch in various browsers and screen sizes to ensure it displays correctly and functions as expected. Make any necessary adjustments to refine its appearance and behavior.

By following these steps, you'll be able to effectively customize a Toggle Switch component using HTML and CSS, allowing you to create a seamless and intuitive user interface for your website visitors.

Code Explanation

HTML Code

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

This HTML code represents a switch toggle input element. It consists of:

A <label> element with the class switch.
An <input> element with the type set to a checkbox.
A <span> element with the class slider, which acts as the slider knob.

CSS Code

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch: Defines the styles for the switch container.

position: relative;: Sets the positioning context for the switch.
display: inline-block;: Allows the switch to be displayed inline within a block-level context.
width: 60px; height: 34px;: Sets the width and height of the switch.

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch input: Hides the default checkbox input.

opacity: 0;: Makes the checkbox input invisible.
width: 0; height: 0;: Sets the width and height of the checkbox input to 0 to make it effectively hidden.

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider: Defines the styles for the slider (the switch button).

position: absolute;: Positions the slider absolutely within its container.
cursor: pointer;: Changes the cursor to a pointer when hovering over the slider.
top: 0; left: 0; right: 0; bottom: 0;: Stretches the slider to cover the entire switch container.
background-color: #ccc;: Sets the background color of the slider to a light gray.
transition: .4s;: Adds a smooth transition effect over 0.4 seconds.
border-radius: 34px;: Rounds the corners of the slider to give it a circular appearance.

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.slider:before: Defines the styles for the slider knob.

position: absolute;: Positions the slider knob absolutely within the slider.
content: "";: Inserts an empty content before the slider.
height: 26px; width: 26px;: Sets the dimensions of the slider knob.
left: 4px; bottom: 4px;: Positions the slider knob within the slider container.
background-color: white;: Sets the background color of the slider knob to white.
transition: .4s;: Adds a smooth transition effect over 0.4 seconds.
border-radius: 50%;: Rounds the corners of the slider knob to give it a circular appearance.

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider: Selects the slider element when the associated checkbox input is checked.

Changes the background color of the slider to #2196F3 (a shade of blue) when the checkbox is checked, indicating the "on" state.

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:focus + .slider: Selects the slider element when the associated checkbox input is focused.

Adds a box shadow to the slider to give it a visual focus indication when the checkbox is focused. The box shadow has a blue color (#2196F3) and is subtle (1px).