Learn how to create eye-catching glowing CSS buttons for your website in 2024 with this easy tutorial on CSS 3D 🔥glowing buttons. Stand out from the crowd and add a touch of interactivity to your web design with these modern and attractive buttons. Watch now to elevate your website's user experience!
🔔 Subscribe for more videos
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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
<title>Document</title>
</head>
<body>
<div class="button">
<label>
<input type="checkbox" name="check" />
<span></span>
<i class="fa-sharp fa-solid fa-1"></i>
</label>
<label>
<input type="checkbox" name="check" />
<span></span>
<i class="fa-sharp fa-solid fa-2"></i>
</label>
<label>
<input type="checkbox" name="check" />
<span></span>
<i class="fa-sharp fa-solid fa-3"></i>
</label>
<label>
<input type="checkbox" name="check" />
<span></span>
<i class="fa-sharp fa-solid fa-4"></i>
</label>
<label>
<input type="radio" id="up" name="check" value="up" />
<span></span>
<i class="fa-sharp fa-solid fa-arrow-up" id="up"></i>
</label>
<label>
<input type="radio" id="down" name="check" value="down" />
<span></span>
<i class="fa-sharp fa-solid fa-arrow-down" id="down"></i>
</label>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333;
}
.button{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 140px;
gap: 20px;
}
.button label{
position: relative;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.button label input{
appearance: none;
}
.button label input:checked ~ span{
box-shadow: inset 0 2px 2px rgba(0,0,0,0.2),
inset 0 5px 5px rgba(0,0,0,0.5), inset 0 10px 15px rgba(0,0,0,0.8);
}
.button label span{
position: absolute;
width: 100%;
height: 100%;
background:linear-gradient(#555353,#363535,#303030);
border: 2px solid #191919;
border-radius: 8px ;
box-shadow: inset 0 5px 3px rgba(0,0,0,0.5) , 0 5px 1px rgba(29, 28, 28, 0.8), 0 10px 15px rgba(52, 52, 52, 0.5);
}
button label span:before{
content: '';
position: absolute;
inset: 5px 3px;
}
.button label i{
position: relative;
z-index: 10;
font-size: 1.5em;
color: #111;
}
.button label input:checked ~ i{
color: white;
text-shadow: 0 0 5px rgb(13, 127, 235);
}
.button label input:checked ~ #up{
color: #0fbaa6;
}
.button label input:checked ~ #down{
color: rgb(209, 32, 32);
}
Comments
Post a Comment