2

I have an element with padding, on :hover I set the background-color and the box-shadow

(when hovering) Safari seems to have problems properly filling the area with the new background-color. Works as expected once I remove the box-shadow attribute from the hover event...

How to keep box-shadow and fix the problem for Safari?

.btn,
a.btn{
    background-color: #027BFF;
    padding: 42px 20px;
}

.btn:hover, a.btn:hover {
    background-color: pink;
    box-shadow: 0 0 0 10px #888;
}
<a href="#" class="btn btn-primary" onclick="javascript: something()"><span>Search</span></a>

Comparison:

enter image description here

enter image description here

DavidDunham
  • 1,245
  • 1
  • 22
  • 44

1 Answers1

6

Add position relative

.btn {
    background-color: #027BFF;
    padding: 42px 20px;
    position: relative;
}

.btn:hover {
  background-color: pink;
  box-shadow: 0 0 0 10px #888;
}
<a href="#" class="btn btn-primary" onclick="javascript: something()"><span>Search</span></a>

What about use button tag?

.btn {
    background-color: #027BFF;
    padding: 42px 20px;
}

.btn:hover {
  background-color: pink;
  box-shadow: 0 0 0 10px #888;
}
<button href="#" class="btn btn-primary" onclick="javascript: something()"><span>Search</span></button>
K.Nikita
  • 591
  • 4
  • 10
  • Great! Thanks. (I cannot change to – DavidDunham Jul 20 '22 at 14:12