Ми створили зовнішній вигляд кнопки в звичайному стані, але така кнопка 3D вимагає стану "штовхання". Що ми робимо, це додаємо темніший колір до кнопки на :hover
і :focus
. Потім для :active
(штовханого) ми видаляємо частину box-shadow
s і штовхаємо його вниз та праворуч із відносним розташуванням. Це так просто: кнопка тепер має справді очевидний і задовольняючий досвід, коли ви натискаєте її.
Такий, який приходить на розум: коли ви регулюєте відносне позиціонування за допомогою таких значень зверху / ліворуч / знизу / праворуч, у майбутньому ви повинні бути обережними, якщо вам потрібно абсолютно розташувати елемент. Можливо, у вас трапляються шалені стрибки, оскільки зверху / зліва / знизу / справа означає щось набагато інше при абсолютному позиціонуванні, ніж при відносному позиціонуванні.