Custom Checkbox Design Using HTML and CSS

Custom Checkbox Design Using HTML and CSS

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.

Custom Checkbox Design Using HTML and CSS

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

Custom Checkbox Design Using HTML and CSS
Custom Checkbox Design Using HTML and CSS

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

 
Custom Checkbox Design Using HTML and CSS
Custom Checkbox Design Using HTML and CSS

 

Custom Checkbox Design Using HTML and 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 



Leave a Reply