5.2K
CSS glowing button using HTML and CSS
When we move the mouse over the button the button starts to glow with different colors effect. In this tutorial, you will learn the CSS glowing button effect on the hover effect using HTML and CSS. Just copy the given source code and paste it into your text editor then run it with the browser and see the effects.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS glowing button on hover effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" id="btn-gra" class="btn-gra">hover me</a>
</body>
</html>
CSS
body{
background-color: #000;
margin: 0;
padding: 0;
}
#btn-gra{
position: absolute;
top: 50%;
left: 50%;
height: 60px;
width: 200px;
transform: translate(-50%,-50%);
font-family: arial black;
text-align: center;
text-decoration: none;
line-height: 60px;
color: #fff;
text-transform: uppercase;
font-size: 24px;
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
z-index: 1;
}
#btn-gra:hover{
color: #fff;
text-decoration: none;
animation: animate 8s linear infinite;
}
@keyframes animate
{
0%
{
background-position: 0%;
}
100%
{
background-position: 400%;
}
}
#btn-gra:before{
content: '';
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
filter: blur(20px);
opacity: 0;
transition: 0.5s;
}
#btn-gra:hover:before{
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
For More Tutorials Please Click Here
