Glowing Effect on Buttons using HTML and CSS

Hello coders,

In this article, you will learn to create a glow button using HTML CSS.

Follow these simple steps to make a beautiful glow button:

1) Open any code editor like Visual Studio.
2) Create HTML, CSS files and put them in your project folder which you create.
3) Link the CSS File With HTML File.
4) Copy the HTML code, which I gave below, and paste it into the HTML which you create.

See also  Create CSS Only Modal Window Using Details Element

HTML Code:

<!DOCTYPE html>
<html lang="en">
    <!--www.codeithub.com-->
<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">
    <title>Glow Button</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="button">
        <button>Hover Button</button>
        <button>Hover Button</button>
      </div>
</body>
</html>

CSS Code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: black;
  overflow: hidden;
}
button{
  position: relative;
  height: 55px;
  width: 250px;
  margin: 0 35px;
  border-radius: 40px;
  border: none;
  outline: none;
  background: #999393;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
}
button:first-child:hover{
  background: linear-gradient(90deg, #e4d9d0, #83f441, #ffeb3b, #f40388);
  background-size: 400%;
}
button:last-child:hover{
  background: linear-gradient(90deg, #da71fa, #62f5a4, #0312e4, #e4d0d6);
  background-size: 400%;
}
button:first-child:before,
button:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
button:first-child:hover:before,
button:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
button:hover{
  z-index: 1;
  animation: glow 8s linear infinite;
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}

OUTPUT

See also  Creative Custom Checkbox using HTML and CSS

More Examples:

3D Flip Button

Gradient Button

Social Media Icons using HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *