Buttons shifting with on:hover

I made two buttons whose borders get highlighted whenever the cursor hovers over them:

The effect works except whenever the cursor hovers over one button, the other button shifts to the side.

Here’s the code (lines 109 -136):

Codepen

Thanks!

It’s because you are adding a 1px border to the button being hovered. Adding a border takes up space and thus pushes the other button over a little.

There are a couple of ways you could fix this. There is the CSS outline property that is generally used for these types of things. The bonus with using outline is that it works for keyboard focus as well. But if you would rather use a border you can still do it, you just have to figure out how to take into account that the border is adding extra space around your button. I’m not going to give it away. I bet if you think about it for a few minutes you can get it.

2 Likes

Thanks! The "outline property " worked perfectly.

I’m still stuck about how to fix it taking into account the border space. I tried adjusting the padding for each button to be smaller and that helped a little but there’s still movement. I also thought maybe if I made the margins around each button bigger that would help create distance between the buttons, but it didn’t help.

I pretty new to CSS and really scratching my head over this.

I’ll give you a hint. Remember, you can change the border color for a button.

So I made the initial “border-color” “transparent” then, in “:hover”, changed it to black and that worked! Thanks again!