How to retain an element's hover area?

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>