With the following method, you can create a custom switch button for your website or web application using HTML and CSS only.
Demo
Open demo in a full window – https://demos.webdevpuneet.com/css/switch-button/index.html
HTML
<div class="container">
<label class="switch">
<span class="switch__text">Grant Private Access </span>
<input class="switch__checkbox" type="checkbox" name="live-sw--name" checked="" tabindex="1">
<span class="switch__elements" aria-hidden="true">
<span class="switch__inner">
<span class="switch__left">YES</span>
<span class="switch__right">NO</span>
<span class="switch__middle"></span>
</span>
</span>
</label>
</div>
CSS
.container {
max-width: 600px;
margin: 0 auto;
}
/* Noselect */
/* on-off switch */
.switch {
display: inline-block;
position: relative;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
margin: 0;
box-sizing: border-box;
}
.switch * {
box-sizing: border-box;
}
.switch,
.switch * {
outline: none;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.switch__text {
font-weight: bold;
display: inline-block;
vertical-align: middle;
}
.switch__checkbox {
display: none;
visibility: hidden;
}
.switch__elements {
display: inline-block;
vertical-align: middle;
position: relative;
border: 1px solid #e6e6e6;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
width: 60px;
height: 25px;
overflow: hidden;
cursor: pointer;
white-space: nowrap;
}
.switch__elements::after {
display: block;
content: "";
clear: both;
}
.switch__checkbox:checked ~ .switch__elements {
border: 1px solid red;
background: red;
}
.switch__inner {
width: 120px;
height: 25px;
display: block;
line-height: 1;
-webkit-transition: transform 0.15s ease-in-out;
-o-transition: transform 0.15s ease-in-out;
-moz-transition: transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out;
transition-property: transform;
position: relative;
transform: translateX(-60px);
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome and Opera */
border-radius: 20px;
overflow: hidden;
}
.switch__inner::after {
display: block;
content: "";
clear: both;
}
.switch__checkbox:checked ~ .switch__elements .switch__inner {
transform: translateX(0px);
}
.switch__left {
background: red;
color: #ffffff;
display: block;
float: left;
width: 50%;
height: 25px;
padding: 6.5px 20px 0px 0;
font-size: 11px;
font-family: Avenir-Next-Medium;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
border-radius: 20px;
text-align: center;
}
.switch__right {
background: #fafafa;
color: #3d3d3d;
display: block;
float: left;
width: 50%;
height: 25px;
padding: 6.5px 0 0px 20px;
font-size: 11px;
font-family: Avenir-Next-Medium;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
border-radius: 20px;
transition-property: transform;
text-align: center;
}
.switch__middle {
width: 23px;
height: 23px;
margin: 0;
background: #ffffff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 0px;
bottom: 0;
left: calc(50% - 12.5px);
transform: translateX(13px);
-webkit-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
transition-property: transform;
}
.switch__checkbox:checked ~ .switch__elements .switch__inner .switch__middle {
transform: translateX(-12px);
}
Download files link: https://webdevpuneet.com/wp-content/uploads/2020/04/switch-button.zip
You must be logged in to post a comment.