1+ Toggle Switch Components - Vanilla CSS

Vanilla CSS toggle switch components are simple and lightweight elements that you can add to your website to allow users to toggle between two states, such as on and off. These toggle switches are created using only CSS, without the need for JavaScript or external libraries. In this collection, you'll find various designs for toggle switches that you can easily incorporate into your website's design. Whether you prefer basic toggle switches or more visually appealing styles, these Vanilla CSS toggle switch components are designed to improve user interaction and provide a seamless browsing experience for your website visitors.

Square Switch

Enhance user interaction on your website with a modern square toggle switch crafted using HTML and CSS. Learn how to create a sleek and intuitive toggle switch to improve user experience.

Author: Admin

Preview
Code

<div>
  <span class="switch square">
    <input id="switch-square" type="checkbox"/>
    <label for="switch-square"></label>
  </span>
</div>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #f9f9f9;
  height: 100vh;
}

.switch input {
  display: none;
}

.switch label {
  display: block;
  width: 60px;
  height: 30px;
  padding: 3px;
  border-radius: 15px;
  border: 2px solid #7e8382;
  cursor: pointer;
  transition: 0.3s;
}

.switch label::after {
  content: "";
  display: inherit;
  width: 20px;
  height: 20px;
  border-radius: 12px;
  background: #7e8382;
  transition: 0.3s;
}

.switch input:checked ~ label {
  border-color: #25c89c;
}

.switch input:checked ~ label::after {
  translate: 30px 0;
  background: #25c89c;
}

.switch.square label,
.switch.square label::after {
  border-radius: 0;
}

```
No need of JavaScript
```

Simple Toggle Switch

Explore the simplicity of Toggle Switch implementation using only HTML and Pure CSS, perfect for adding interactive switches to your website without JavaScript dependencies.

Author: Admin

Preview
Code

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

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

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

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

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

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

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

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

```
No need of JavaScript
```