Het maken van een schakelknop (toggle button) in CSS kan behoorlijk lastig zijn, omdat je zowel de functionaliteit (gewoonlijk beheerd met JavaScript) als het uiterlijk van de schakelknop moet behandelen. Maar hier zijn de basisstappen:
1. HTML Structuur:
Eerst moet je de basis HTML opzetten voor de schakelknop, die meestal een invoervak omvat met een checkbox.
```
```
1. CSS Styling:
Vervolgens zou je de CSS voor de schakelknop en de slider instellen.
```
.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;
transition: .4s;
}
.slider:before {
position: absolute;
content: “”;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
```
1. Aanpassen:
Aanpassingen kunnen vervolgens worden aangebracht aan de breedte, hoogte, achtergrondkleur, enz. om aan te passen aan de stijl van je website.
Vergeet niet dat deze knop geen functionaliteit heeft. Als je wilt dat de schakelaar daadwerkelijk iets doet, dan moet je JavaScript gebruiken. De meeste webontwikkelaars combineren meestal JavaScript (of jQuery) met CSS om interactieve en dynamische elementen op een webpagina te creëren.
