Кнопки на CSS-Tricks на момент создания этого видео имели искусственный 3D-эффект. Они похожи на синий кирпич, на который вы смотрите сверху под углом. Когда вы нажимаете на них, их: активное состояние запускается (как и все ссылки / кнопки / входы), и CSS перемещает их вниз и вправо, как будто вы буквально немного вдавливаете кирпич в поверхность.
В чем проблема? Когда вы перемещаете такой элемент (в данном случае преобразование :), translate(3px, 3px);вы меняете область, в которой это нажатие вызовет событие DOM «щелчок». Если место расположения этого пресса находится в области, которая теперь превышает размер этой «интерактивной» области, она не сработает. Таким образом, кнопка выглядит нажатой, но на самом деле никогда не нажимается. Это странное, плохое и неожиданное поведение.
Эффект по-прежнему крутой, поэтому в этом видео мы исправляем его, перемещая псевдоэлемент, чтобы заполнить оставшееся пространство, сделав «кликабельную» область всегда такой же.