I want the button I have to add a border on hover; however, I doing that will cause other elements to move and I do not like that. I tried to fix that using a transparent border; however, that will just show the button's background color. I want it to only show the button, then the border should just be nothing, whatever element's below background, then if I hover i want it to show a border also, it will ruin the rounded look of the button

CodePudding user response：

The reason you only see the button's background is because setting a transparent border removes the existing border style that is on the button by default. You could use a box shadow without any blurring. The following will give a 4px red border without affecting the box sizing.

button:hover{box-shadow: 0px 0px 0px 4px red;}

CodePudding user response：

Another possible option, if you're able to define the width and height of the button, you can use box-sizing. The button will occupy the same amount of space regardless of border style as that will be calculated into its overall size.

button{box-sizing:border-box;width:60px;height:24px}
button:hover{border:4px solid red}