Please check out my YouTube Channel
Today we are going to learn how to make a custom switch/checkbox made by using HTML and CSS only.
CodePen
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Custom Animated CSS Switch</title>
</head>
<body>
<div class="center">
<input type="checkbox" name="" id="" />
</div>
</body>
</html>
CSS Code
body {
margin: 0;
padding: 0;
background: #f3f3f3;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"] {
position: relative;
width: 80px;
height: 40px;
-webkit-appearance: none;
background: #c6c6c6;
outline: none;
cursor: pointer;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
transition: background 300ms linear;
}
input:checked[type="checkbox"] {
background: #03a9f4;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
top: 0;
left: 0;
background: #fff;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: left 300ms linear;
}
input:checked[type="checkbox"]::before {
left: 40px;
}
Top comments (0)