Home » CSS glowing button using HTML and CSS

CSS glowing button using HTML and CSS

by techmidpoint
CSS glowing button using HTML and CSS

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

You may also like

Leave a Comment