Button border thickness hover state effects elements surrounding it

Design help Animations & Interactions
1

Button example

Hi,

I have a button set up so on hover the thickness of the borer changes from 3px to 6px, however, in doing so it moves an element below the button down the page by what looks like 6px…

I’m sure the answer is straightforward enough but it’s alluding me at the moment.

Thanks!

2

Because border takes up space on the page. It’s like adding padding to the element more padding there will be more gap. And also it is according to CSS box model.

But there is a great solution for what you need. Use box-shadow without blur and distance property, create hover state and you’ll get same effect without spacing issue.

1 Like
3

You can learn more about the CSS-box model at the link below :point_down:
CSS-Box-Model

4

@abirana Thanks pal! That worked perfectly.

5

@whitakereditions Thank you :+1: