Here is a simple example of creating a toggle button in CSS:
HTML code:
```
```
CSS code:
```
.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;
}
.slider:before {
position: absolute;
content: “”;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
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);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
```
In this code, we create an HTML `label` with a class of `switch` that wraps an `input` of type `checkbox` and a `span` with a class of `slider round`.
The checkbox input is hidden by setting its opacity to 0. A custom styled slider is shown instead, which is styled in CSS to be round and change color when the checkbox is checked.
The translation transform moves the white circle by 26px on the x-axis when an input is checked. The `transition` property is used to change the properties smoothly over a given duration. The `.round` class makes the slider round.
