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)
Normal state
See how the text button is placed slightly right compared to the heading?
enter image description here

Hover state
On hover state, the button now appears to be slightly left compared to heading?
enter image description here

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)


  • 1
    Hi. Welcome to GDSE. The normal state image literally has no button. If there was a button shape behind the text, I don't think you'd have a problem. – Billy Kerr Mar 3 at 10:57
  • 1
    I'd say it's completely fine as it is. If it started bothering me, I'd perhaps try adding border-left to the parent element. Maybe it could disappear on hover or you could add some extra white space between the vertical line and the first button. Color could be low opacity gray. Another thing you could do is add a very low opacity gray border or background to each button. – Joonas Mar 3 at 12:16
  • I'd use a border for the non-hovered state. – Zach Saucier Mar 3 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.