Мы создали вид кнопки в ее обычном состоянии, но такая трехмерная кнопка требует «нажатого» состояния. Что мы делаем, так это добавляем более темный цвет кнопкам :hoverи :focus. Затем для :active(нажатого) мы удаляем часть box-shadows и смещаем его вниз и вправо с относительным позиционированием. Это так просто: теперь кнопка становится действительно очевидной и приятной, когда вы нажимаете на нее.
Один из них, который приходит на ум: когда вы настраиваете относительное позиционирование с помощью таких значений, как верхний / левый / нижний / правый, вы должны быть осторожны в будущем, если вам нужно абсолютно позиционировать элемент. Вы можете совершить сумасшедшие скачки, так как верхнее / левое / нижнее / правое положение означает нечто совершенно иное при абсолютном позиционировании, чем при относительном.