Кнопки на CSS-Tricks, під час цього відео, мають штучний 3D-ефект. Вони схожі на блакитну цеглу, на яку ви дивитесь зверху під кутом. Коли ви натискаєте на них, спрацьовує їх: активний стан (як і всі посилання / кнопки / входи), і CSS переміщує їх вниз і вправо, здаючись, ніби ви буквально трохи натискаєте цеглу на поверхню.
В чому проблема? Коли ви переміщуєте такий елемент (у цьому випадку, transform:), translate(3px, 3px);ви змінюєте область, в якій це натискання спричинить подію DOM “click”. Якщо місцезнаходження цієї преси виявляється в зоні, яка зараз перевищує цю “клікабельну” область, це не спрацює. Таким чином, кнопка виглядає натиснутою, але насправді ніколи не стає натиснутою. Це дивно, погано і несподівано.
Хоча ефект все ще прохолодний, тому у цьому відео ми виправляємо його, переміщуючи псевдоелемент, щоб заповнити простір, що залишився, роблячи область, на яку можна натискати, завжди однакову.