Glowing Button Animation using HTML & CSS

Glowing Button Animation using HTML & CSS

Hello developers, today in this blog you will learn to create a Glowing Button Animation using HTML and CSS.

The effect is used for applying glowing texture on a button or around the button. The glow effect displays a bright colored outline around a button and the text in the button.

In this blog (Glowing Button Animation), on the webpage, there is a button at the center of the webpage with a random glowing effect around a button. There is a text "Learn More" inside a button with a glow animation around the button. The glowing effect around the button changes randomly, that is the button will glow for one second. This animation is made by using the CSS @keyframes property.

The source code of this Glowing Button Animation using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Glowing Button Animation using HTML & CSS on your projects.

Glowing Button Animation [Source Code]

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

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Glowing button || Learningrobo</title> <link rel="stylesheet" href="./style.css"> </head> <body> <a class="button" href="#">Learn More</a> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></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.


body {
  background: #0F2027;  
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027); 
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027); 
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  
}
.button {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 30px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
  margin: 20px;
}
@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

.credit a{
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  }
  
  .credit {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 10px;
    color:#fff;
    text-align: center;
  }
We hope you would like this Glowing Button Animation using HTML & CSS.

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

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome