I'm aware that by default it doesn't behave this way, but I'm attempting to make it do so.
I'm in the process of constructing a button-shaped anchor with a solid box-shadow (no blur) to give the appearance of depth, and upon hovering, it reacts.
The only issue is that the reaction occurs only when the cursor is directly above the anchor itself. Due to the slight movement of the anchor when hovered, depending on the proximity of the cursor to the edge, it results in the anchor flickering.
Is there a way to have the shadow included in the overall size of the element? I understand it's frustrating for a button to misbehave like this, but is it indicative of poor coding? While I acknowledge it's somewhat of a design query, my main focus is on the code.
TLDR: my anchor flickers when hovered too close to the edge. Any alternative solutions?
The code is functioning, but I'll provide it nonetheless.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}<a class="btn" href="#">subscribe</a>EDIT: Thank you Paulie_D, the solution worked perfectly! Using a pseudo-element with absolute positioning stretched in all directions was the way to go.