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
![](https://codingtorque.com/wp-content/uploads/2022/09/3-7-1024x576.png)
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](https://codingtorque.com/wp-content/uploads/2022/09/2-10-1024x576.png)
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖