Using Material UI components for demo (the misalignment is not as huge with Material but might be more visible with other libraries)
I am aligning the text button (PRIMARY) against a heading (Form)
See how the text button is placed slightly right compared to the heading?
Question: How can we have the text button aligned to heading on both hovered and normal states?
A couple of options come to mind.
- keep the padding minimal to make the misalignment negligible
- move content right on hover to accommodate padding from hover (apply transform effect make it look better)