Button Hover State Help

Hello everyone,

This is supposed to be relatively easy but I’m not sure why my button “grows” bigger when it’s on Hover state. All the specifications remained the same except that I made the Borders to be 2px during Hover state. I’m trying to create the same Hover effect as : https://bitesizeinc.com/home. Would someone please advise what’s the mistake or what’s the proper way to make this work?

Thanks in advance!

http://okie-media-website.webflow.io/ (Scroll all the way down to the buttons before the footer)
Image 2017-06-28 at 10.27.2...
https://cl.ly/1i3m2F0z1l2K

Hi @Lex_Na_Wei_Ming can you please share your read-only link?

thanks in advance

https://preview.webflow.com/preview/okie-media-website?preview=b41b957cc7910f345a26e1451db8caf7

Here’s my read-only link

On hover you have a 2px border being added, therefore the whole site is moving down 4px. (2px at top, 2px at bottom)

Either remove the border on hover, or put the buttons in a fixed height div container.

1 Like

Oh, that makes a lot of sense. Now I understand. Got it working as intended now. Thank you!

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.