Make a beautiful button on-off using only CSS
Style 1)
HTML code below
<div class="checkbox-askiw">
<input type="checkbox" value="none" id="askiw-checkbox-id" name="check">
<label for="askiw-checkbox-id"></label>
</div>CSS code below
/****************************************
* Checkbox https://askiw.com/how-to-style-a-checkbox-using-css/
*****************************************/
.checkbox-askiw input[type=checkbox] {
visibility: hidden;
}
.checkbox-askiw {
position: relative;
width: 80px;
height: 26px;
background: #333;
margin: 20px;
border-radius: 50px;
}
.checkbox-askiw:after {
position: absolute;
right: 10px;
z-index: 0;
content: 'OFF';
font: 12px/26px Arial, sans-serif;
color: #eee;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}
.checkbox-askiw:before {
position: absolute;
left: 10px;
z-index: 0;
content: 'ON';
font: 12px/26px Arial, sans-serif;
color: #00FFFF;
font-weight: bold;
}
.checkbox-askiw label {
position: absolute;
top: 3px;
left: 3px;
display: block;
width: 34px;
height: 20px;
border-radius: 50px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
z-index: 1;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #AFAFAF;
background: rgb(235,234,234);
background: linear-gradient(0deg, rgba(235,234,234,1) 45%, rgba(189,193,195,1) 85%);
}
.checkbox-askiw input[type=checkbox]:checked + label {
left: 43px;
}Style 2)
HTML code below
<label class="container-askiw">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>CSS code below
/* The container Checkbox https://askiw.com/how-to-style-a-checkbox-using-css/ */
.container-askiw {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container-askiw input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container-askiw:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container-askiw input:checked ~ .checkmark {
background-color: red;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container-askiw input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container-askiw .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}Style 3 )
HTM code below
<div class="askiw-checkbox-1">
<input type="checkbox" value="None" id="askiw-checkbox-1" name="check">
<label for="askiw-checkbox-1"></label>
</div>CSS code below
/****************************************
* Checkbox Checkbox https://askiw.com/how-to-style-a-checkbox-using-css/
*****************************************/
.askiw-checkbox-1 input[type=checkbox] {
visibility: hidden;
}
.askiw-checkbox-1 {
width: 28px;
height: 28px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
}
.askiw-checkbox-1 label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
left: 4px;
top: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.askiw-checkbox-1 label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00FFFF;
background: -webkit-linear-gradient(top, #00FFFF 0%, #008282 100%);
background: -moz-linear-gradient(top, #00FFFF 0%, #008282 100%);
background: -o-linear-gradient(top, #00FFFF 0%, #008282 100%);
background: -ms-linear-gradient(top, #00FFFF 0%, #008282 100%);
background: linear-gradient(top, #00FFFF 0%, #008282 100%);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
top: 2px;
left: 2px;
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.askiw-checkbox-1 label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.askiw-checkbox-1 input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}