Hemos creado el aspecto de un botón en su estado normal, pero un botón 3D como ese pide un estado "pulsado". Lo que hacemos es agregar un color más oscuro al botón en :hover
y :focus
. Luego, para :active
(empujado), eliminamos algunos de los box-shadow
sy lo empujamos hacia abajo y hacia la derecha con posicionamiento relativo. Es tan simple como eso, el botón ahora tiene una experiencia realmente obvia y satisfactoria cuando hace clic en él.
Uno que me viene a la mente: cuando ajusta el posicionamiento relativo con valores superior / izquierda / inferior / derecha como ese, debe tener cuidado en el futuro si necesita posicionar absolutamente el elemento. Es posible que tenga algunos saltos locos, ya que arriba / izquierda / abajo / derecha significa algo muy diferente con el posicionamiento absoluto que con el posicionamiento relativo.