7 CSS Toggle Button Styles with Code

1. Basic Toggle

CSS:

.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: #2196F3;
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
}

2. iOS-style Toggle

CSS:

.toggle-ios {
position: relative;
display: inline-block;
width: 50px;
height: 30px;
}
.toggle-ios input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-ios-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e9e9ea;
transition: .4s;
border-radius: 30px;
}
.toggle-ios-slider:before {
position: absolute;
content: "";
height: 28px;
width: 28px;
left: 1px;
bottom: 1px;
background-color: white;
transition: .4s;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
input:checked + .toggle-ios-slider {
background-color: #4cd964;
}
input:checked + .toggle-ios-slider:before {
transform: translateX(20px);
}

3. Material Design Toggle

CSS:

.toggle-material {
position: relative;
display: inline-block;
width: 36px;
height: 14px;
}
.toggle-material input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-material-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.38);
transition: .4s;
border-radius: 14px;
}
.toggle-material-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: -2px;
bottom: -3px;
background-color: #fafafa;
transition: .4s;
border-radius: 50%;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
input:checked + .toggle-material-slider {
background-color: rgba(33,150,243,0.5);
}
input:checked + .toggle-material-slider:before {
transform: translateX(20px);
background-color: #2196F3;
}

4. Neon Toggle

CSS:

.toggle-neon {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-neon input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-neon-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333;
transition: .4s;
border-radius: 34px;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.toggle-neon-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #fff;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-neon-slider {
background-color: #000;
box-shadow: inset 0 0 10px rgba(0,255,255,0.5);
}
input:checked + .toggle-neon-slider:before {
transform: translateX(26px);
box-shadow: 0 0 15px #00ffff;
}

5. Flat Toggle

CSS:

.toggle-flat {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.toggle-flat input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-flat-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bdc3c7;
transition: .4s;
}
.toggle-flat-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .toggle-flat-slider {
background-color: #2ecc71;
}
input:checked + .toggle-flat-slider:before {
transform: translateX(30px);
}

6. Dark Mode Toggle

CSS:

.toggle-dark-mode {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-dark-mode input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-dark-mode-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2c3e50;
transition: .4s;
border-radius: 34px;
}
.toggle-dark-mode-slider:before {
position: absolute;
content: "🌙";
display: flex;
align-items: center;
justify-content: center;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #34495e;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-dark-mode-slider {
background-color: #f1c40f;
}
input:checked + .toggle-dark-mode-slider:before {
content: "☀️";
transform: translateX(26px);
background-color: #f39c12;
}

7. Minimal Dark Toggle

CSS:

.toggle-minimal-dark {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.toggle-minimal-dark input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-minimal-dark-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333;
transition: .4s;
border-radius: 24px;
}
.toggle-minimal-dark-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #ddd;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-minimal-dark-slider {
background-color: #ddd;
}
input:checked + .toggle-minimal-dark-slider:before {
transform: translateX(26px);
background-color: #333;
}