custom checkbox using html css | custom toggle checkbox using html and css | css tutorial
custom toggle checkbox using html and css
website: here
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="div">
<div class="text">WiFi</div>
<div class="btn">
<input type="checkbox" class="btn-check">
<div class="switch"></div>
</div>
</div>
<div class="div">
<div class="text">VPN</div>
<div class="btn">
<input type="checkbox" class="btn-check">
<div class="switch"></div>
</div>
</div>
<div class="div">
<div class="text">Bluetooth</div>
<div class="btn">
<input type="checkbox" class="btn-check">
<div class="switch"></div>
</div>
</div>
<div class="div">
<div class="text">Hotspot</div>
<div class="btn">
<input type="checkbox" class="btn-check">
<div class="switch"></div>
</div>
</div>
<div class="div">
<div class="text">Mobile data</div>
<div class="btn">
<input type="checkbox" class="btn-check">
<div class="switch"></div>
</div>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
display: flex;
justify-content: center;
font-family: 'Poppins', sans-serif;
}
.container {
width: 350px;
height: 450px;
margin-top: 50px;
background-color: antiquewhite;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5),
2px 2px 1px rgba(0, 0, 0, 0.5),
3px 2px 1px rgba(0, 0, 0, 0.5),
20px 20px 25px rgba(0, 0, 0, 0.5);
border-radius: 15px;
}
.div {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
width: 300px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.text {
font-size: 35px;
}
.btn {
background-color: white;
width: 60px;
height: 25px;
margin-right: 10px;
border-radius: 30px;
padding: 2px;
}
.switch {
background-color: lightgray;
height: 20px;
width: 20px;
border-radius: 50%;
margin-top: 3px;
margin-left: 3px;
transition: 0.5s;
}
.btn-check {
position: absolute;
width: 100%;
height: 25px;
z-index: 5;
}
input:checked~.switch {
margin-left: 37px;
background-color: black;
}
Caution - In the recruitment process, legitimate companies never charge a fee from candidates. If there are companies that charge for interviews, tests, ticket reservations, etc., it is better to avoid them because there are indications of fraud. Do not transfer any payments when applying for a job.
Post a Comment
Post a Comment