Glowing Buttons on Hover using HTML & CSS

Glowing Buttons on Hover using HTML & CSS

Hello developers, today in this blog you will learn to create a Glowing Buttons on Hover using HTML & CSS.

The effect is used for applying glowing texture in an object or around the object when hovering. The glow effect displays a bright-colored button. The colors will glow in the running mode of the buttons. The glow effect was mainly used to attract visitors to the buttons.

In this blog (Glowing Buttons on Hover), there are some buttons on the webpage. When you hover on the button, the button will display you with a glow effect. The button will glow with the running effect of the sentence. It can be used on the website to attract your buttons on the webpage. This animation was made by using the CSS @keyframes property.

The source code of this Glowing Buttons on Hover using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use these Glowing Buttons on Hover with your creativity and can take this project to the next level.

Glowing Buttons on Hover [Source Code]

To make this website (Glowing Buttons on Hover), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Glowing Buttons on Hover || Learningrobo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <button>Learning Robo</button> <button>Learning Robo</button> <button>Learning Robo</button> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css extension.


*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  height: 100vh;
  background: #000;
  align-items: center;
  justify-content: center;
}
button{
  position: relative;
  height: 60px;
  width: 200px;
  margin: 20px;
  border: none;
  outline: none;
  color: white;
  background-image: linear-gradient(-45deg, #000,#111);
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}
button:before{
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  filter: blur(5px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000,#ffff00, #00ff00,  #0000ff, #00ffff);
  background-size: 400%;
  transition: opacity .3s ease-in-out;
  animation: animate 20s linear infinite;
}
button:hover:before{
  opacity: 1;
}
button:hover:active{
  background: none;
}
button:hover:active:before{
  filter: blur(2px);
}
@keyframes animate {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}
.credit a{
  text-decoration: none;
  color: #29c5f6;
  font-weight: bold;
}
.credit {
  text-align: center;
  color: #fff;
  margin-top: 30px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
We hope you would like these Glowing Buttons on Hover using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating these Glowing Buttons on Hover using HTML & CSS, then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools