CSS for Button Glow Effect on Hover

There is a new trend in web design these days and that is to have a glowing button effect for call to action (CTA) buttons in an other-wise clean and flat design. In this post, I will create a simple button and apply glow effect with CSS on it when user hovers over it. We can also use the CSS presented below to add a permanent glow effect to CSS buttons.

Glow Button Examples

For an example to see how the glowing buttons can add effect to your design, see the following Dribble by Denis Abdullin. For more such design inspiration, visit this compilation by Muzli

Source: Dribble

Button Glow Effect CSS

We will be writing a fairly simple and straightforward CSS to add a glow effect on buttons upon hover.

Below you will find the HTML code snippet for the button. We are adding button and glow-button class to our button in order to have glowing effect applied via CSS.

<a href="#" class="button glow-button">Glow Button</a>

Next, we define our button class in the CSS, which will give our button a classic square button with rounded corner looks. Note that we have also added a transition effect for our button which will make the hover animation to be  a smooth glow instead of an abrupt glow.

.button {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  background: rgb(145, 92, 182);
  padding: 15px 40px;
  border-radius: 4px;
  font-weight: normal;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
}

Now we add the definition of glow-button in our CSS. In order to have this glow animation only when user hovers over the button, we are using the CSS selector :hover. If you need to have a permanent glow effect on the button, all you need to do is to remove this :hover selection from the glow-button definition.

.glow-button:hover {
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
}

Note that the glow effect is being achieved here using the box-shadow property. We are using the same color as of the background of the button and applying an opacity of 40% for the box-shadow definition. This will add a glow effect of the same color as of the button. You may want to tweak the values presented in the code in order to have a button of your desired style.

Demo of Glow Effect on Button

In the CodePen embed below, you can see our button. Hover over the button to see the glow effect in action. You can play around with the style of the button by changing values like color and box-shadow in the CSS tab below.

See the Pen Glow Buttons with CSS by Kanishk Kunal on CodePen.

You may find various other CSS button effects on this blog too, such as 3D CSS button and ghost button.