CSS3: Glowing background on link-hover (not text-glow)

StackOverflow https://stackoverflow.com/questions/14728832

  •  07-03-2022
  •  | 
  •  

Question

I have a menu, containing several links. I want these links to have a glowing effect in the background when I hover them.

I have almost made it using css transition, box-shadow and a lighter background-color on the links.

The problem is that the transition-effect affects the box-shadow, so that when the transition starts, the links has no box-shadow, which gives them a squared background-color. When the transition has ended, the glowing background looks fine.

Please see my jsFiddle: http://jsfiddle.net/xCJ46/.

I would very much appreciate your help with this.

Here is an extract of my CSS:

<html><style>
div a:hover {
    background: #527fa9;

    -webkit-box-shadow: inset 0 0 30px 15px #49628a;
    -moz-box-shadow: inset 0 0 30px 15px #49628a;
    box-shadow: inset 0 0 30px 15px #49628a;

    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
}
</style></html>
Was it helpful?

Solution

Add the box-shadow to the link's property (not hover).

div a { box-shadow: inset 0 0 30px 15px #49628a; }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top