Create Glowing Effect with CSS

Learn how to create a glowing effect with the help of  CSS.

Lets create a simple button or a link with the help of  html code.

<a href="appointment.html" >
Make an Appointment
</a>

Add a css class to style it,

<a href="appointment.html" class="appointment-btn">
Make an Appointment
</a>

Give Style to the button,

.appointment-inline .appointment-btn {
background-color: #af740e;
color: #ffffff;
display: inline-block;
font-weight: bold;
font-size: 13px;
padding: 10px 20px;
}

Add animation to the link or button.

.appointment-inline .appointment-btn {
background-color: #af740e;
color: #ffffff;
display: inline-block;
font-weight: bold;
font-size: 13px;
padding: 10px 20px;
animation: glow 1s infinite alternate;
}

In this section, you can change the animation speed, animation loop, and animation name.

Set keyframes on your animation :

@keyframes glow {
from {
background-color: #f99b8b;
box-shadow: 0 0 5px -5px #f99b8b;
}
to {
box-shadow: 0 0 5px 5px #f99b8b;
}
}

in keyframes you can change the background color and the shadow color according to you.

Now we have done. You have successfully created a beautiful animation on a link or a button with the help of CSS animation.

The result will look like :

Your animation is for infinite time means it continue glowing until you close the page.

You may also like...

Leave a Reply

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