Safari box-shadow bug?

Question

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:

Answer 1

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>