CSS Toggle Switches are CSS way of toggling between two or more CSS classes or styling properties on a single element. This can be useful if you want to change the styling of an element based on some user interaction, like a button press or hover.
<div class="toggle-1">
<input type="checkbox" checked />
<label></label>
</div>
<div class="toggle-2">
<input type="checkbox" checked />
<label></label>
</div>
<div class="toggle-3">
<input type="checkbox" checked />
<label></label>
</div>
<div class="toggle-4">
<input type="checkbox" checked />
<label></label>
</div>
<div class="toggle-5">
<input type="checkbox" checked />
<label></label>
</div>
<div class="toggle-6">
<input type="checkbox" checked />
<label></label>
</div>
<div class="toggle-7">
<input type="checkbox" checked />
<label></label>
</div>
<div class="toggle-8">
<input type="checkbox" checked />
<label></label>
</div>
<div class="toggle-9">
<input type="checkbox" checked />
<label></label>
</div>.toggle-1 {
position: relative;
display: inline-block;
}
.toggle-1:before {
content: "";
position: absolute;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
width: 8px;
height: 16px;
z-index: 2;
transform: rotate(45deg);
top: 11px;
left: 15px;
}
.toggle-1:after {
content: "×";
position: absolute;
top: 45%;
transform: translateY(-50%);
left: 55px;
z-index: 2;
line-height: 42px;
font-size: 26px;
color: #aaa;
}
.toggle-1 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-1 label {
position: relative;
display: flex;
align-items: center;
}
.toggle-1 label:before {
content: "";
width: 80px;
height: 42px;
box-shadow: 0 0 1px 2px #0001;
background: #eee;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.2s ease-in;
}
.toggle-1 label:after {
content: "";
position: absolute;
width: 42px;
height: 42px;
border-radius: 50%;
left: 0;
top: 0;
z-index: 5;
background: #fff;
box-shadow: 0 0 5px #0002;
transition: 0.2s ease-in;
}
.toggle-1 input[type="checkbox"]:hover + label:after {
box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
.toggle-1 input[type="checkbox"]:checked + label:before {
transition: 0.1s 0.2s ease-in;
background: #4bd865;
}
.toggle-1 input[type="checkbox"]:checked + label:after {
left: 38px;
}
.toggle-2 {
position: relative;
box-sizing: border-box;
}
.toggle-2 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-2 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.toggle-2 label:before {
content: "";
width: 75px;
height: 42px;
background: #ccc;
position: relative;
display: inline-block;
border-radius: 46px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.toggle-2 label:after {
content: "";
position: absolute;
width: 38px;
height: 38px;
border-radius: 50%;
left: 2px;
top: 2px;
z-index: 2;
background: #fff;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.toggle-2 input[type="checkbox"]:checked + label:before {
background: #4bd865;
}
.toggle-2 input[type="checkbox"]:checked + label:after {
left: 35px;
}
.toggle-3 {
position: relative;
box-sizing: border-box;
}
.toggle-3 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-3 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.toggle-3 label:before {
content: "";
width: 70px;
height: 40px;
background: #fff;
border: 2px solid #ddd;
box-shadow: inset -30px 0 0 #ccc;
position: relative;
display: inline-block;
border-radius: 20px;
box-sizing: border-box;
transition: 0.25s ease-in-out;
}
.toggle-3 input[type="checkbox"]:checked + label:before {
box-shadow: inset 30px 0 0 #13bf11;
}
.toggle-4 {
position: relative;
box-sizing: border-box;
}
.toggle-4 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-4 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.toggle-4 label:before {
content: "";
width: 100px;
height: 42px;
background: #ccc;
position: relative;
display: inline-block;
border-radius: 46px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.toggle-4 label:after {
content: "";
position: absolute;
width: 38px;
height: 38px;
border-radius: 50%;
left: 2px;
top: 2px;
z-index: 2;
background: #fff;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.toggle-4 input[type="checkbox"]:checked + label:before {
background: #4bd865;
}
.toggle-4 input[type="checkbox"]:checked + label:after {
left: 60px;
}
.toggle-5 {
position: relative;
box-sizing: border-box;
}
.toggle-5 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-5 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.toggle-5 label:before {
content: "";
width: 56px;
height: 22px;
background: #ccc;
box-shadow: inset 0 0 0 0px #13bf11;
position: relative;
display: inline-block;
border-radius: 20px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.toggle-5 label:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
left: 0;
top: -4px;
z-index: 2;
background: #fff;
box-shadow: 0 1px 10px #0005;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.toggle-5 input[type="checkbox"]:checked + label:before {
box-shadow: inset 40px 0 0 #13bf11;
}
.toggle-5 input[type="checkbox"]:checked + label:after {
left: 26px;
}
.toggle-6 {
position: relative;
height: 32px;
display: flex;
align-items: center;
}
.toggle-6 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-6 label {
position: relative;
display: flex;
align-items: center;
}
.toggle-6 label:before {
content: "";
background: #bbb;
height: 2px;
width: 60px;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.2s ease-in;
}
.toggle-6 label:after {
content: "";
position: absolute;
background: #bbb;
top: -16px;
width: 32px;
height: 32px;
left: 0;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 5px #0002;
transition: 0.2s ease-in;
}
.toggle-6 input[type="checkbox"]:hover + label:after {
box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
.toggle-6 input[type="checkbox"]:checked + label:before {
background: #13bf11;
}
.toggle-6 input[type="checkbox"]:checked + label:after {
background: #fff;
left: 28px;
}
.toggle-7 {
position: relative;
}
.toggle-7 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-7 label {
position: relative;
display: flex;
align-items: center;
}
.toggle-7 label:before {
content: "";
border: 5px solid #bbb;
height: 43px;
width: 80px;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.2s ease-in;
}
.toggle-7 label:after {
content: "";
position: absolute;
background: #555;
width: 28px;
height: 28px;
left: 8px;
top: 8px;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 5px #0002;
transition: 0.2s ease-in;
}
.toggle-7 input[type="checkbox"]:hover + label:after {
box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
.toggle-7 input[type="checkbox"]:checked + label:before {
border-color: #4bd865;
}
.toggle-7 input[type="checkbox"]:checked + label:after {
background: #4bd865;
left: 44px;
}
.toggle-8 {
position: relative;
box-sizing: border-box;
}
.toggle-8 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-8 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.toggle-8 label:before {
content: "";
width: 84px;
height: 42px;
position: relative;
display: inline-block;
border-radius: 46px;
border: 2px solid #fff;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.toggle-8 label:after {
content: "";
position: absolute;
width: 36px;
height: 36px;
border-radius: 50%;
left: 3px;
top: 3px;
z-index: 2;
border: 2px solid #fff;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.toggle-8 input[type="checkbox"]:checked + label:after {
left: 44px;
background: #fff;
}
.toggle-9 {
position: relative;
box-sizing: border-box;
}
.toggle-9 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle-9 label {
position: relative;
display: flex;
align-items: center;
height: 36px;
box-sizing: border-box;
}
.toggle-9 label:before {
content: "";
width: 72px;
height: 36px;
border-radius: 20px;
position: relative;
display: inline-block;
transition: 0.2s ease;
box-sizing: border-box;
background-color: #333;
box-shadow: 0 0 12px #0003, inset -72px 0 #fff;
}
.toggle-9 label:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #444;
border-radius: 20px;
box-sizing: border-box;
left: 0;
top: 0;
transform: translate(8px, 8px);
transition: 0.2s ease;
}
.toggle-9 input[type="checkbox"]:checked + label:after {
background: #fff;
transform: translate(47px, 8px);
}
.toggle-9 input[type="checkbox"]:checked + label:before {
box-shadow: 0 0 12px #0003, inset 0 0 #fff;
}.toggle-1 {
position: relative;
display: inline-block;
&:before {
content: "";
position: absolute;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
width: 8px;
height: 16px;
z-index: 2;
transform: rotate(45deg);
top: 11px;
left: 15px;
}
&:after {
content: "×";
position: absolute;
top: 45%;
transform: translateY(-50%);
left: 55px;
z-index: 2;
line-height: 42px;
font-size: 26px;
color: #aaa;
}
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:hover {
+ {
label {
&:after {
box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
}
}
}
&:checked {
+ {
label {
&:before {
transition: 0.1s 0.2s ease-in;
background: #4bd865;
}
&:after {
left: 38px;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
&:before {
content: "";
width: 80px;
height: 42px;
box-shadow: 0 0 1px 2px #0001;
background: #eee;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.2s ease-in;
}
&:after {
content: "";
position: absolute;
width: 42px;
height: 42px;
border-radius: 50%;
left: 0;
top: 0;
z-index: 5;
background: #fff;
box-shadow: 0 0 5px #0002;
transition: 0.2s ease-in;
}
}
}
.toggle-2 {
position: relative;
box-sizing: border-box;
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:checked {
+ {
label {
&:before {
background: #4bd865;
}
&:after {
left: 35px;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "";
width: 75px;
height: 42px;
background: #ccc;
position: relative;
display: inline-block;
border-radius: 46px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
&:after {
content: "";
position: absolute;
width: 38px;
height: 38px;
border-radius: 50%;
left: 2px;
top: 2px;
z-index: 2;
background: #fff;
box-sizing: border-box;
transition: 0.2s ease-in;
}
}
}
.toggle-3 {
position: relative;
box-sizing: border-box;
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:checked {
+ {
label {
&:before {
box-shadow: inset 30px 0 0 #13bf11;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "";
width: 70px;
height: 40px;
background: #fff;
border: 2px solid #ddd;
box-shadow: inset -30px 0 0 #ccc;
position: relative;
display: inline-block;
border-radius: 20px;
box-sizing: border-box;
transition: 0.25s ease-in-out;
}
}
}
.toggle-4 {
position: relative;
box-sizing: border-box;
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:checked {
+ {
label {
&:before {
background: #4bd865;
}
&:after {
left: 60px;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "";
width: 100px;
height: 42px;
background: #ccc;
position: relative;
display: inline-block;
border-radius: 46px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
&:after {
content: "";
position: absolute;
width: 38px;
height: 38px;
border-radius: 50%;
left: 2px;
top: 2px;
z-index: 2;
background: #fff;
box-sizing: border-box;
transition: 0.2s ease-in;
}
}
}
.toggle-5 {
position: relative;
box-sizing: border-box;
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:checked {
+ {
label {
&:before {
box-shadow: inset 40px 0 0 #13bf11;
}
&:after {
left: 26px;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "";
width: 56px;
height: 22px;
background: #ccc;
box-shadow: inset 0 0 0 0px #13bf11;
position: relative;
display: inline-block;
border-radius: 20px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
&:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
left: 0;
top: -4px;
z-index: 2;
background: #fff;
box-shadow: 0 1px 10px #0005;
box-sizing: border-box;
transition: 0.2s ease-in;
}
}
}
.toggle-6 {
position: relative;
height: 32px;
display: flex;
align-items: center;
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:hover {
+ {
label {
&:after {
box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
}
}
}
&:checked {
+ {
label {
&:before {
background: #13bf11;
}
&:after {
background: #fff;
left: 28px;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
&:before {
content: "";
background: #bbb;
height: 2px;
width: 60px;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.2s ease-in;
}
&:after {
content: "";
position: absolute;
background: #bbb;
top: -16px;
width: 32px;
height: 32px;
left: 0;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 5px #0002;
transition: 0.2s ease-in;
}
}
}
.toggle-7 {
position: relative;
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:hover {
+ {
label {
&:after {
box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
}
}
}
&:checked {
+ {
label {
&:before {
border-color: #4bd865;
}
&:after {
background: #4bd865;
left: 44px;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
&:before {
content: "";
border: 5px solid #bbb;
height: 43px;
width: 80px;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.2s ease-in;
}
&:after {
content: "";
position: absolute;
background: #555;
width: 28px;
height: 28px;
left: 8px;
top: 8px;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 5px #0002;
transition: 0.2s ease-in;
}
}
}
.toggle-8 {
position: relative;
box-sizing: border-box;
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:checked {
+ {
label {
&:after {
left: 44px;
background: #fff;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "";
width: 84px;
height: 42px;
position: relative;
display: inline-block;
border-radius: 46px;
border: 2px solid #fff;
box-sizing: border-box;
transition: 0.2s ease-in;
}
&:after {
content: "";
position: absolute;
width: 36px;
height: 36px;
border-radius: 50%;
left: 3px;
top: 3px;
z-index: 2;
border: 2px solid #fff;
box-sizing: border-box;
transition: 0.2s ease-in;
}
}
}
.toggle-9 {
position: relative;
box-sizing: border-box;
input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
&:checked {
+ {
label {
&:after {
background: #fff;
transform: translate(47px, 8px);
}
&:before {
box-shadow: 0 0 12px #0003, inset 0 0 #fff;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
height: 36px;
box-sizing: border-box;
&:before {
content: "";
width: 72px;
height: 36px;
border-radius: 20px;
position: relative;
display: inline-block;
transition: 0.2s ease;
box-sizing: border-box;
background-color: #333;
box-shadow: 0 0 12px #0003, inset -72px 0 #fff;
}
&:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #444;
border-radius: 20px;
box-sizing: border-box;
left: 0;
top: 0;
transform: translate(8px, 8px);
transition: 0.2s ease;
}
}
}