CSS Toggle Switches with icon is a 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="icon-toggle-1">
<input type="checkbox" checked />
<label></label>
</div>
<div class="icon-toggle-2">
<input type="checkbox" checked />
<label></label>
</div>
<div class="icon-toggle-3">
<input type="checkbox" checked />
<label></label>
</div>
<div class="icon-toggle-4">
<input type="checkbox" checked />
<label></label>
</div>
<div class="icon-toggle-5">
<input type="checkbox" checked />
<label></label>
</div>
<div class="icon-toggle-6">
<input type="checkbox" checked />
<label></label>
</div>.icon-toggle-1 {
display: inline-block;
position: relative;
border-radius: 40px;
height: 50px;
width: 125px;
background: #fff;
transition: 0.2s ease-in;
border: 1px solid #ddd;
box-sizing: border-box;
}
.icon-toggle-1:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.icon-toggle-1 input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 6;
opacity: 0;
cursor: pointer;
}
.icon-toggle-1 label {
height: 48px;
width: 48px;
position: absolute;
border-radius: 50%;
border: 10px solid #2752dd;
right: 0;
box-sizing: border-box;
transition: transform 0.25s 0.2s ease-out, border 0.2s ease-out,
right 0.2s ease-out;
transform: rotate(-135deg);
}
.icon-toggle-1 label:after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 10px;
height: 25px;
background: #2752dd;
box-sizing: border-box;
transform: translateX(-50%);
transition: 0.2s ease-out;
}
.icon-toggle-1 label:before {
content: "";
position: absolute;
box-sizing: border-box;
border-bottom: 10px solid #2752dd;
border-right: 10px solid #2752dd;
top: 37px;
left: 3px;
width: 25px;
height: 25px;
transform: rotate(45deg);
transition: 0.2s ease-out;
}
.icon-toggle-1 input:checked + label {
border-color: #fc2695;
right: 75px;
transform: rotate(0deg);
}
.icon-toggle-1 input:checked + label:after {
background: #fc2695;
height: 35px;
}
.icon-toggle-1 input:checked + label:before {
border-right: none;
border-color: #fc2695;
transform: rotate(0deg);
top: 32px;
}
.icon-toggle-2 {
position: relative;
box-sizing: border-box;
}
.icon-toggle-2 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.icon-toggle-2 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.icon-toggle-2 label:before {
content: "";
width: 70px;
height: 40px;
background: #fff;
border: 2px solid #ddd;
box-shadow: inset -30px 0 0 #666;
position: relative;
display: inline-block;
border-radius: 20px;
box-sizing: border-box;
transition: 0.25s ease-in;
}
.icon-toggle-2 label:after {
content: "";
width: 20px;
height: 20px;
position: absolute;
left: 10px;
top: 10px;
border-radius: 50%;
background: #fff;
box-shadow: inset -8px -5px #333;
transition: 0.2s ease-in-out;
}
.icon-toggle-2 input[type="checkbox"]:checked + label:before {
box-shadow: inset 30px 0 0 #ffeb00;
}
.icon-toggle-2 input[type="checkbox"]:checked + label:after {
box-shadow: inset 0 0 0 2px #fff;
background: #ffbc00;
left: 39px;
top: 8px;
border: 2px dashed #fff;
box-sizing: content-box;
}
.icon-toggle-3 {
position: relative;
box-sizing: border-box;
}
.icon-toggle-3 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.icon-toggle-3 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.icon-toggle-3 label:before {
content: "";
width: 70px;
height: 40px;
background: #fff;
border: 2px solid #b3c5fe;
box-shadow: inset -30px 0 0 #b3c5fe;
position: relative;
display: inline-block;
border-radius: 20px;
box-sizing: border-box;
transition: 0.25s ease-in;
}
.icon-toggle-3 label:after {
content: "";
width: 4px;
height: 4px;
position: absolute;
left: 12px;
top: 15px;
background: #fff;
border-radius: 7px;
border: 5px solid #b3c5fe;
transition: 0.2s ease-in-out;
box-shadow: -2px -4px 0 -2px #fff, 0px -8px 0 -4px #fff,
0px -8px 0 -2px #b3c5fe;
box-sizing: initial;
}
.icon-toggle-3 input[type="checkbox"]:checked + label:before {
box-shadow: inset 30px 0 0 #215aff;
border-color: #215aff;
}
.icon-toggle-3 input[type="checkbox"]:checked + label:after {
left: 45px;
border-color: #215aff;
box-shadow: 0px -8px 0 -4px #fff, 0px -8px 0 -2px #215aff;
}
.icon-toggle-4 {
position: relative;
box-sizing: border-box;
}
.icon-toggle-4 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.icon-toggle-4 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.icon-toggle-4 label:before {
content: "";
width: 84px;
height: 42px;
position: relative;
display: inline-block;
border: 2px solid #999;
border-radius: 20px;
box-sizing: border-box;
}
.icon-toggle-4 label:after {
content: "🔓";
position: absolute;
width: 32px;
height: 32px;
left: 6px;
top: 4px;
z-index: 2;
display: grid;
place-content: center;
font-size: 32px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.icon-toggle-4 input[type="checkbox"]:checked + label:after {
content: "🔒";
left: 48px;
}
.icon-toggle-5 {
position: relative;
box-sizing: border-box;
}
.icon-toggle-5 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.icon-toggle-5 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.icon-toggle-5 label:before {
content: "";
width: 84px;
height: 42px;
position: relative;
display: inline-block;
background: #ffed00;
border-radius: 46px;
border: 2px solid #ffd000;
box-sizing: border-box;
}
.icon-toggle-5 label:after {
content: "😞";
position: absolute;
width: 32px;
height: 32px;
left: 4px;
top: 6px;
z-index: 2;
display: grid;
place-content: center;
font-size: 32px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.icon-toggle-5 input[type="checkbox"]:checked + label:after {
content: "😊";
transform: rotate(360deg);
left: 48px;
}
.icon-toggle-6 {
position: relative;
box-sizing: border-box;
}
.icon-toggle-6 input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.icon-toggle-6 label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
}
.icon-toggle-6 label:before {
content: "🚬";
font-size: 36px;
position: relative;
box-sizing: border-box;
display: inline-block;
}
.icon-toggle-6 input[type="checkbox"]:checked + label:after {
content: "❌";
position: absolute;
font-size: 20px;
left: 9px;
top: 24px;
box-sizing: border-box;
}.icon-toggle-1 {
display: inline-block;
position: relative;
border-radius: 40px;
height: 50px;
width: 125px;
background: #fff;
transition: 0.2s ease-in;
border: 1px solid #ddd;
box-sizing: border-box;
&:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 6;
opacity: 0;
cursor: pointer;
&:checked {
+ {
label {
border-color: #fc2695;
right: 75px;
transform: rotate(0deg);
&:after {
background: #fc2695;
height: 35px;
}
&:before {
border-right: none;
border-color: #fc2695;
transform: rotate(0deg);
top: 32px;
}
}
}
}
}
label {
height: 48px;
width: 48px;
position: absolute;
border-radius: 50%;
border: 10px solid #2752dd;
right: 0;
box-sizing: border-box;
transition: transform 0.25s 0.2s ease-out, border 0.2s ease-out, right 0.2s ease-out;
transform: rotate(-135deg);
&:after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 10px;
height: 25px;
background: #2752dd;
box-sizing: border-box;
transform: translateX(-50%);
transition: 0.2s ease-out;
}
&:before {
content: "";
position: absolute;
box-sizing: border-box;
border-bottom: 10px solid #2752dd;
border-right: 10px solid #2752dd;
top: 37px;
left: 3px;
width: 25px;
height: 25px;
transform: rotate(45deg);
transition: 0.2s ease-out;
}
}
}
.icon-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 {
box-shadow: inset 30px 0 0 #ffeb00;
}
&:after {
box-shadow: inset 0 0 0 2px #fff;
background: #ffbc00;
left: 39px;
top: 8px;
border: 2px dashed #fff;
box-sizing: content-box;
}
}
}
}
}
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 #666;
position: relative;
display: inline-block;
border-radius: 20px;
box-sizing: border-box;
transition: 0.25s ease-in;
}
&:after {
content: "";
width: 20px;
height: 20px;
position: absolute;
left: 10px;
top: 10px;
border-radius: 50%;
background: #fff;
box-shadow: inset -8px -5px #333;
transition: 0.2s ease-in-out;
}
}
}
.icon-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 #215aff;
border-color: #215aff;
}
&:after {
left: 45px;
border-color: #215aff;
box-shadow: 0px -8px 0 -4px #fff, 0px -8px 0 -2px #215aff;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "";
width: 70px;
height: 40px;
background: #fff;
border: 2px solid #b3c5fe;
box-shadow: inset -30px 0 0 #b3c5fe;
position: relative;
display: inline-block;
border-radius: 20px;
box-sizing: border-box;
transition: 0.25s ease-in;
}
&:after {
content: "";
width: 4px;
height: 4px;
position: absolute;
left: 12px;
top: 15px;
background: #fff;
border-radius: 7px;
border: 5px solid #b3c5fe;
transition: 0.2s ease-in-out;
box-shadow: -2px -4px 0 -2px #fff, 0px -8px 0 -4px #fff, 0px -8px 0 -2px #b3c5fe;
box-sizing: initial;
}
}
}
.icon-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 {
&:after {
content: "🔒";
left: 48px;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "";
width: 84px;
height: 42px;
position: relative;
display: inline-block;
border: 2px solid #999;
border-radius: 20px;
box-sizing: border-box;
}
&:after {
content: "🔓";
position: absolute;
width: 32px;
height: 32px;
left: 6px;
top: 4px;
z-index: 2;
display: grid;
place-content: center;
font-size: 32px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
}
}
.icon-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 {
&:after {
content: "😊";
transform: rotate(360deg);
left: 48px;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "";
width: 84px;
height: 42px;
position: relative;
display: inline-block;
background: #ffed00;
border-radius: 46px;
border: 2px solid #ffd000;
box-sizing: border-box;
}
&:after {
content: "😞";
position: absolute;
width: 32px;
height: 32px;
left: 4px;
top: 6px;
z-index: 2;
display: grid;
place-content: center;
font-size: 32px;
box-sizing: border-box;
transition: 0.2s ease-in;
}
}
}
.icon-toggle-6 {
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 {
content: "❌";
position: absolute;
font-size: 20px;
left: 9px;
top: 24px;
box-sizing: border-box;
}
}
}
}
}
label {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
&:before {
content: "🚬";
font-size: 36px;
position: relative;
box-sizing: border-box;
display: inline-block;
}
}
}