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.
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;
}
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.
Post a Comment
Thank you
Learning robo team