<main>
<div class="switch">
<input type="checkbox" id="switch">
<label for="switch">Switch label</label>
</div>
<div class="switch">
<input type="checkbox" id="switch-checked" checked>
<label for="switch-checked">Switch label</label>
</div>
<div class="switch">
<input type="checkbox" id="switch-disabled" disabled>
<label for="switch-disabled">Switch label</label>
</div>
<div class="switch">
<input type="checkbox" id="switch-checked-disabled" checked disabled>
<label for="switch-checked-disabled">Switch label</label>
</div>
<a href="https://remybeumier.be/blog/css-only-toggle-switch-button" target="_blank" class="header__logo">Read the related article</a>
</main>
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 16px;
font-family: Arial;
}
body {
margin: 0;
padding: 2rem 1rem;
text-align: center;
background-color: #0093e9;
background-image: linear-gradient(-30deg, #0093e9 0%, #80d0c7 100%);
min-height: 100vh;
}
main {
padding: 2.5rem;
background-color: rgba(256,256,256,1);
display: inline-block;
a {
text-align: center;
display: block;
margin-top: 2em;
color: #333;
&:hover {
color: #666;
}
}
}
.switch {
input[type='checkbox'] {
appearance: none;
display: block;
margin: 0;
}
label {
display: block;
height: 2.375rem;
position: relative;
cursor: pointer;
padding: 0.625rem 0 0.625rem 4.5rem;
}
input[type='checkbox'] + label::before {
content: 'No';
text-align: right;
font-size: 0.875rem;
padding: 0.375rem 0.5rem;
color: #ffffff;
display: block;
height: 1.75rem;
width: 3.75rem;
border-radius: 9999px;
position: absolute;
top: calc(0.375rem - 1px);
left: 0;
background-color: #8f8f8f;
box-shadow: 0 0 0 1px #e0e0e0;
transition: all 0.3s cubic-bezier(0.72, 0.26, 0.26, 0.82), visibility 0s;
}
input[type='checkbox'] + label::after {
content: '';
display: block;
height: 1.75rem;
width: 1.75rem;
border: solid 0.25rem #8f8f8f;
border-radius: 9999px;
position: absolute;
top: calc(0.375rem - 1px);
left: 0;
background-color: #ffffff;
transition: all 0.3s cubic-bezier(0.72, 0.26, 0.26, 0.82), visibility 0s;
}
input[type='checkbox']:checked + label::before {
content: 'Yes';
text-align: left;
background-color: #008000;
}
input[type='checkbox']:checked + label::after {
left: 2rem;
border-color: #008000;
}
input[type='checkbox']:disabled + label {
cursor: not-allowed;
&::before {
background-color: #f5f5f5;
color: #e0e0e0;
}
&::after {
background-color: #e0e0e0;
border-color: #f5f5f5;
}
}
input[type='checkbox']:checked:disabled + label {
&::before {
background-color: #f5f5f5;
color: #707070;
}
&::after {
background-color: #707070;
border-color: #f5f5f5;
}
}
input[type='checkbox']:focus + label::before,
input[type='checkbox']:focus-visible + label::before {
box-shadow: 0 0 0 4px #e0e0e0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.