custom checkbox using html and css with source code

Custom Checkbox using HTML and CSS – Coding Torque

Share your love

Hello Guys! Welcome to Coding Torque. In this blog, I’m going to explain to you how to make Custom Checkbox using HTML and CSS. This will be a step-by-step guide. Let’s get started 🚀.

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

 

 

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

 

HTML Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Custom checkbox button using css - @code.scientist x @codingtorque</title>

</head>

<body>
    <div class="container">
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-youtube"></i>
                <p>YouTube</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-facebook-f"></i>
                <p>Facebook</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-instagram"></i>
                <p>Instagram</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-telegram"></i>
                <p>Telegram</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-twitter"></i>
                <p>Twitter</p>
            </div>
        </div>
        <div class="checkbox">
            <input type="checkbox" name="">
            <div class="box">
                <i class="fab fa-github"></i>
                <p>GitHub</p>
            </div>
        </div>
    </div>
</body>

</html>

Output Till Now

CSS Code 

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Poppins");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 500px;
    margin-top: 10rem;
}

.checkbox {
    height: 40px;
    width: 160px;
    position: relative;
    margin: 5px;
}

.checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border: 2px solid gainsboro;
    border-radius: 10px;
}

.box i {
    margin-right: 4px;
}

.checkbox input:checked~.box {
    border-color: deeppink;
    color: deeppink;
}

Output Till Now

custom checkbox using html and css with source code
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖
Share your love

Related Posts