How to retain an element's hover area? - html

Question

I've been trying to create elements which will change position slightly when hovered - in this example we have a primitive attempt at a 3D button which is slightly depressed when hovered over. All works as intended, unless the top and left 3 pixels are hovered over, in which case it rapidly flickers between the two states.
Is it possible, without creating a duplicate transparent element, to make the hover area not shift with the element and eliminate this behaviour? JavaScript and JQuery solutions are okay but pure HTML/CSS would be best.
#button {
width: 100px;
height: 100px;
background-color: #00f;
box-shadow: 10px 10px 3px #aaa;
}
#button:hover {
transform: translate(3px, 3px);
box-shadow: 7px 7px 2.1px #888;
}
<div id="button">
</div>
JSFiddle link

Answer 1

You could create a pseudo element :after and style this instead:
#button {
width: 100px;
height: 100px;
}
#button:after {
display: block;
width: 100%;
height: 100%;
background-color: #00f;
box-shadow: 10px 10px 3px #aaa;
content: "";
}
#button:hover:after {
transform: translate(3px, 3px);
box-shadow: 7px 7px 2.1px #888;
}
<div id="button">
</div>

Answer 2

You can use a relative position and left/top offsets instead, that seems to work better (i.e. without flickering):
#button {
width: 100px;
height: 100px;
background-color: #00f;
box-shadow: 10px 10px 3px #aaa;
position: relative;
}
#button:hover {
left: 3px;
top: 3px;
box-shadow: 7px 7px 2.1px #888;
}
<div id="button">
</div>