Glowing Checkbox With Icon In HTML CSS
**Introduction: Glowing Checkbox With Icon In HTML CSS
HTML Structure:
- Create a
divelement to wrap the checkbox.
- Inside the
div, include aninputelement of type "checkbox" and alabelelement associated with that checkbox.
- Use CSS to style the checkbox and hide the default checkbox input.
- Style the
labelto create a visual representation of the checkbox. You can use Font Awesome icons for this purpose.
- Add a
::beforepseudo-element to thelabelto represent the checkmark icon. Customize its appearance.
- Utilize the
:checkedselector to modify the appearance when the checkbox is checked.
- Apply a transition effect for a smoother visual change.
- Optionally, add a glowing effect using a box-shadow when the checkbox is checked.
- Create a
CSS Styling:
In summary, the HTML structure contains a checkbox input and a label, and the CSS styles define the appearance of the checkbox, including the icon and the glowing effect when checked. You can customize the styles based on your preferences and requirements.
ScreenShots
<->
start, add the following HTML codes to your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Checkbox With Icon In HTML CSS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul>
<li>
<label>
<input type="checkbox" checked name="">
<i class="fa fa-wifi" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
<li>
<label>
<input type="checkbox" checked name="">
<i class="fa fa-bluetooth-b" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<i class="fa fa-volume-up" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
<li>
<label>
<input type="checkbox" checked name="">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span class="check"></span>
</label>
</li>
</ul>
</body>
</html>
Next, add the following CSS codes to your style.css
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #060606;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
ul li {
width: 100px;
text-align: center;
}
ul li label .fa,
ul li label input[type="checkbox"] {
display: block;
text-align: center;
}
ul li label .fa {
font-size: 30px;
color: #222;
transition: 0.5s;
}
ul li label input[type="checkbox"] {
display: none;
}
ul li label .check {
position: relative;
display: block;
width: 50px;
height: 50px;
background: linear-gradient(#000, #333);
border-radius: 50%;
margin: 10px auto 0;
display: flex;
justify-content: center;
align-items: center;
}
ul li label .check::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #1b1b1b;
transition: 0.5s;
z-index: 3;
}
ul li label .check::after {
content: "";
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
background-color: #222;
border-radius: 50%;
z-index: 2;
border: 2px solid #161616;
}
ul li label input[type="checkbox"]:checked ~ .check::before {
background-color: rgba(0, 176, 255, 1);
box-shadow: 0 0 10px rgba(0, 176, 255, 1),
0 0 15px rgba(0, 176, 255, 1),
0 0 20px rgba(0, 176, 255, 1),
0 0 25px rgba(0, 176, 255, 1),
0 0 0 2px rgba(0, 176, 255, 0.1);
}
ul li label input[type="checkbox"]:checked ~ .fa {
color: rgba(0, 176, 255, 1);
}