Hello Guys, In this article or video we will see Amazing Custom Check Box Using Only HTML & CSS. You will use this Amazing Custom Check Box on your website freely. If you learn How to create this Amazing Custom Check Box so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on index.html file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Amazing Custom Check Box - Pure Coding</title>
</head>
<body>
<form class="wrapper">
<div class="input-group">
<input type="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label"></label>
</div>
</form>
</body>
</html>
Then add this code on style.css file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;
1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #6c5ce7;
}
.wrapper .input-group {
width: 270px;
height: 80px;
border-radius: 4px;
background: #FFF;
display: flex;
justify-content: space-around;
align-items: center;
}
.wrapper .input-group input[type="checkbox"] {
width: 90px;
height: 40px;
border-radius: 30px;
background: #e6e6e6;
-webkit-appearance: none;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
position: relative;
outline: none;
transition: .3s;
}
.wrapper .input-group input[type="checkbox"]:checked {
background: #6c5ce7;
}
.wrapper .input-group input[type="checkbox"]::before {
content: "";
position: absolute;
left: 0;
top: 0;
transform: scale(.85);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
background: linear-gradient(#FFF, #F1F1F1, #E6E6E6);
width: 40px;
height: 100%;
border-radius: 50%;
transition: .2s linear;
}
.wrapper .input-group input[type="checkbox"]:checked::before {
left: 50px;
}
.wrapper .input-group input[type="checkbox"] ~ .checkbox-label::before {
content: "Disabled";
font-size: 1.3rem;
color: rgba(0, 0, 0, .3);
font-weight: 600;
}
.wrapper .input-group input[type="checkbox"]:checked ~ .checkbox-label::before {
content: "Enabled";
color: #6c5ce7;
}
