Physical UI gives a command readable states: ready, armed, pressed and complete. While building LookADev, I used depth and press feedback to help visitors distinguish an available action from one they had just triggered.
A CRT-style button can combine a raised border with a pressed transform. Keep its label, focus ring and disabled state readable. Depth is one cue among several; keyboard users and people who reduce motion still need clear feedback.
CSS custom properties can separate the highlight edge, the shadow edge and the pressed offset. As a starting point, try 80 ms for the press and 120 ms for release, then test with your users. Those durations are design settings, not a universal threshold for perceived responsiveness.
The radio-dial contact buttons on the contact page pushed this further. Each dial rotates with pointer tracking, has a detent snap at specific angles, and triggers the corresponding channel (WhatsApp, Email, GitHub, LinkedIn). The rotation uses Math.atan2 on pointer coordinates relative to the dial center, quantized to 45-degree steps.
Profile hover effects before adopting will-change. A page with many buttons does not necessarily create one compositing layer per button, and will-change can consume extra resources. Compare paint and compositing traces for the same interaction rather than treating the property as a performance fix.
Check state legibility through the full interaction: can the visitor find the action, recognise that it registered and understand the result? Show progress for asynchronous work and keep a clear way to retry when it fails.
Reference: MDN: will-change and its resource costs.