Custom Checkbox Design Using HTML and CSS
Welcome to the Codewithrandom blog. In this blog, We learn how to create Custom Checkbox Design. We use HTML and CSS for this Custom Checkbox Design.
I hope you enjoy our blog so let’s start with a basic Html Structure for Custom Checkbox Design.
HTML Code For Custom Checkbox Design
<!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" />
<title>Checkbox</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<p>Choose your favorites</p>
<div class="container">
<div class="checkbox">
<input type="checkbox" name="" id="" />
<div class="box">
<i class="fab fa-instagram"></i>
<p data-text="Instagram">Instagram</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="" id="" />
<div class="box">
<i class="fab fa-facebook-square"></i>
<p data-text="facebook">facebook</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="" id="" />
<div class="box">
<i class="fab fa-twitter"></i>
<p data-text="Twitter">Twitter</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="" id="" />
<div class="box">
<i class="fab fa-whatsapp"></i>
<p data-text="Whats App">Whats App</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="" id="" />
<div class="box">
<i class="fab fa-github"></i>
<p data-text="Github">Github</p>
</div>
</div>
<div class="checkbox">
<input type="checkbox" name="" id="" />
<div class="box">
<i class="fab fa-discord"></i>
<p data-text="Discord">Discord</p>
</div>
</div>
</div>
</body>
</html>
There is all the Html Code for the Custom Checkbox Design. Now, you can see output without CSS, then we write Css for our Styling Custom Checkbox Design.
50+ HTML, CSS & JavaScript Projects With Source Code
Html Code Output
CSS Code For Custom Checkbox Design
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
.container {
width: 450px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 1em 0 0 0;
}
.checkbox {
width: 140px;
height: 40px;
position: relative;
margin: 0.5em 0;
}
.checkbox input {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 2;
appearance: none;
-webkit-appearance: none;
}
.box {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
background: #f7f7f7;
border: 2px solid #d1d1d1;
color: rgb(63, 63, 63);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: all 0.6s;
}
.box i {
margin-right: 0.3em;
}
.box p {
transition: all 0.2s;
}
.checkbox input:checked ~ .box p {
transform: translateY(-30px);
}
.box p::before {
content: attr(data-text);
position: absolute;
transform: translateY(30px);
}
.checkbox input:checked ~ .box p::before {
transform: translateY(30px);
}
.checkbox input:checked ~ .box {
background: #f7f7f7;
border: 2px solid #185ADB;
color: #185ADB;
}
Now we have completed your Custom Checkbox Design, Here is our updated output HTML + CSS.
5+ HTML CSS Projects With Source Code
Final Output Of Custom Checkbox Design Using CSS
Create a Music Player using HTML,CSS & JavaScript
Hope you like the Custom Checkbox Design, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create a Custom Checkbox Design Using Html and Css. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
