Tombol toggle switch merupakan sebuah tombol yang berfungsi untuk on/off pada sebuah website, blog.
Lihat Juga: CSS Trick Membuat Tombol Switch 3D Only CSS3
Biasanya tombol switch toggle ini digunakan untuk suatu perintah seperti toggle dark mode dalam sebuah website.
Tampilan dari toggle switch ini bisa kita hias dengan CSS dengan mudah dan tampilan visualnya sederhana tetapi tidak memalukan.
Berikut cara membuat toggle switch tanpa javascript
1. Siapkan Notepad dan Browser
2. Copy kode HTML dan CSS dibawah dan pastekan di notepad kalian
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle Switch | Kenscripts</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display:none;
}
.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%;
}
</style>
</head>
<body>
<h2>Toggle Switch | Kenscripts</h2>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div class="slider"></div>
</label><br><br>
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
</body>
</html>
3. Done Save as .html
Begitulah cara mudah dalam membuat toggle dengan CSS.
Terima kasih telah berkunjung.