Hello Friends, Today in this blog you’ll learn how to create a CSS 3D Glowing Checkbox Buttons using HTML & CSS. In recent years, web designers have been experimenting with new ways to create visually appealing interfaces for their users. One such method is the use of CSS 3D glowing checkbox buttons. These buttons offer a new way of interacting with the user and can add a touch of interactivity to your website. In this blog post, we will take a closer look at what CSS 3D glowing checkbox buttons are, how they work, and how you can create them for your own website.
In recent years, web designers have been experimenting with new ways to create visually appealing interfaces for their users. One such method is the use of CSS 3D glowing checkbox buttons. These buttons offer a new way of interacting with the user and can add a touch of interactivity to your website. In this blog post, we will take a closer look at what CSS 3D glowing checkbox buttons are, how they work, and how you can create them for your own website.
What are CSS 3D Glowing Checkbox Buttons?
CSS 3D glowing checkbox buttons are a type of button that uses CSS3 properties to create a 3D effect and a glowing animation. These buttons are similar to traditional checkboxes but with a more modern look and feel. The buttons can be used for a variety of purposes, including forms, surveys, and quizzes. They are designed to be both functional and visually appealing.
How do they work?
CSS 3D glowing checkbox buttons are created using a combination of CSS3 properties. The buttons are created by applying a series of CSS styles to the HTML input element. The styles include transformations, gradients, and animations. When a user interacts with the button, the animation is triggered, and the button glows.
Creating CSS 3D Glowing Checkbox Buttons
Creating CSS 3D glowing checkbox buttons is a straightforward process that requires a basic understanding of CSS3. The following is a step-by-step guide to creating CSS 3D glowing checkbox buttons.
Animated Logo [Source Codes]
You need to create Two Files: HTML File and CSS File. After creating these files just paste the following codes into your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" href="/style.css">
<title>Document</title>
</head>
<body>
<div class="buttons">
<label >
<input type="checkbox" name="check">
<span></span>
<i class="fa-solid fa-phone"></i>
</label>
<label >
<input type="checkbox" name="check">
<span></span>
<i class="fa-solid fa-wifi"></i>
</label>
<label >
<input type="checkbox" name="check">
<span></span>
<i class="fa-solid fa-plane"></i>
</label>
<label >
<input type="checkbox" name="check">
<span></span>
<i class="fa-solid fa-volume-xmark"></i>
</label>
<label >
<input type="checkbox" name="check">
<span></span>
<i class="fa-solid fa-battery-full"></i>
</label>
<label >
<input type="checkbox" name="check">
<span></span>
<i class="fa-solid fa-music"></i>
</label>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #60605e;
}
.buttons{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 140px;
gap: 20px;
}
.buttons label{
position: relative;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.buttons label input{
appearance: none;
}
.buttons label span{
position: absolute;
width: 100%;
height: 100%;
border: 2px solid #04f520;
border-radius: 50%;
}
.buttons label input:checked ~ span{
background: #04f520;
}
.buttons label i{
position: relative;
z-index: 10;
font-size: 1.5em;
color: #a6a1a1;
}
.buttons label input:checked ~ i{
color: #fff;
}
.png)