Designing Stylish Checkboxes with HTML and CSS

 In this tutorial, we'll explore the art of creating visually appealing checkboxes using HTML and CSS. Checkboxes are a fundamental component of web forms, but that doesn't mean they have to be boring! Join us as we dive into the world of web design and learn how to customize checkboxes to match your website's style and branding.

1.Create a New Folder

2.Open the Folder in Vs Code 

3.Create index.html and style.css Files 

4.Begin Coding    

index.html 

<!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="style.css">

    <title>Check Box</title>

</head>

<body>

    <div class="container">

        <div class="card">

            <div class="row">

                <p>Subscribe</p>

                    <label>

                        <input type="checkbox" checked="" >

                        <span></span>

                    </label>

               

            </div>

            <div class="row">

                <p>Like</p>

                    <label>

                        <input type="checkbox" checked="checked">

                        <span></span>

                    </label>

               

            </div>

            <div class="row">

                <p>Comment</p>

                    <label>

                        <input type="checkbox" checked="checked">

                        <span></span>

                    </label>

               

            </div>

            <div class="row">

                <p>Share</p>

                    <label>

                        <input type="checkbox" checked="checked">

                        <span></span>

                    </label>

               

            </div>

        </div>

    </div>

</body>

</html>

style.css 

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Poppins",sans-serif;

}

.container{

    width: 100%;

    height: 100vh;

    background-color: black;

    display: flex;

    justify-content: center;

    align-items: center;

}

.card{

    width: 500px;

    padding: 25px 40px 25px 25px;

    box-shadow: 0 25px 45px rgba(0,0,0,0.2);

    background: rgba(255,255,255,0.1);

    border: 2px solid rgba(255,255,255,0.5);

    border-right: 2px solid rgba(255,255,255,0.2);

    border-bottom: 2px solid rgba(255,255,255,0.2);

    backdrop-filter: blur(10px);

}

.row{

    align-items: center;

    display: flex;

    margin: 20px 0;

    justify-content: space-between;

    font-size: 25px;

    color: white;

}

label{

    position: relative;

    width: 50px;

    height: 50px;

}

input{

    width: 100%;

    height: 100%;

    opacity: 0;

    position: absolute;

}

label span{

    width: 75px;

    height: 100%;

   display:block;

    position: absolute;

    cursor: pointer;

    border: 3px solid white;

    border-radius: 5px;

   

   

}

label span::after{

    content: '';

    position: absolute;

    width: 20px;

    height: 40px;

    left: 24px;

    bottom: 10px;

    border: solid blue;

    border-width: 0 6px 6px 0;

    transform: rotate(45deg);

    opacity: 0;

    transition:width 0.5s, height 0.5s , opacity 0.5s;

}

input:checked ~ span::after{

    width: 15px;

    height: 30px;

    opacity: 1;

}