По време на това видео бутоните на CSS-трикове имат изкуствен 3D ефект. Те приличат на синя тухла, която гледате отгоре под ъгъл. Когато ги натиснете, се задейства тяхното: активно състояние (като всички връзки / бутони / входове) и CSS ги премества надолу и надясно, като изглежда, че буквално натискате тухла надолу в повърхността.
Какъв е проблема? Когато премествате елемент като този (в този случай преобразувайте:), translate(3px, 3px);
вие променяте областта, в която това натискане ще задейства DOM събитието „щракване“. Ако местоположението на тази преса се окаже в област, която сега е по-голяма от тази „кликваща“ зона, тя няма да се задейства. Така бутонът изглежда натиснат, но всъщност никога не се натиска. Това е странно и лошо и неочаквано поведение.
Ефектът все пак е страхотен, така че в това видео го поправяме, като преместваме псевдоелемент, за да запълним оставеното пространство, правейки зоната за кликване винаги една и съща.
Вижте демонстрационната писалка.