Kevin Powell - Community•2mo ago

fix border layout on hover

help me solving this out i had a flex container and the buttons as the flex items i had applied padding on that it is fine for now , i had gave the styles on the hovering where the border change to 2px , now my problem is when i start hovering due to increase of the border to 2px it readjusting the width of the element for this i applied the box-sizing to border box but the issue still persists
here is my codepen link https://codepen.io/GOPI-CHAND-SADINENI/pen/NWQqKyB

GOPI CHAND SADINENI

CodePen

Untitled

...

10 Replies

clevermissfox•2mo ago

button {
/* styles+*/
  border: 2px solid transparent;
  transition: border-color 400ms;

  &:is(:hover, :focus-visible) {
    border-color: yellow; 
  }
}

button {
/* styles+*/
  border: 2px solid transparent;
  transition: border-color 400ms;

  &:is(:hover, :focus-visible) {
    border-color: yellow; 
  }
}

It’s shifting the layout because you’re adding 2px*2 to the inline size that wasn’t there before Add it to the starting style with a transparent color and then just transition the color. You can also use outline or box-shadow but outline is best left to default focus state for a11y (accessibility)

BadBoy_YTOP•2mo ago

exactly , i had a doubt that i had a box-sizing : border-box why this could not prevent the issue

clevermissfox•2mo ago

Because you’re adding onto the width of the element on hover , it would be the same as if you added 4px to the btn width on hover ; it’s still including the border, padding and content as the width but when you add 4px to it the width still gets bigger. If you don’t tell it the size of the border to begin with it doesn’t know you want a border. Another example would be if you gave the button a 2px border to start with then made the border 10px on hover; there is no placeholder for the extra 8px in the base state so when you add it in for the hover state, the layout has to shift to account for those extra pixels. Box-sizing is just a way to tell the browser what should define the width; the content box, the padding box + content box or the border box + padding + content.

BadBoy_YTOP•2mo ago

cool,thanks a lot

clevermissfox•2mo ago

Does that make sense ?

BadBoy_YTOP•2mo ago

yes, what if we have a fixed width,height on button, does that changes the width on hover with content-box?

clevermissfox•2mo ago

You shouldn’t put widths on buttons with text and shouldn’t put fixed heights on nearly anything. Do you mean if you add a border on hover like your demo? And with box-sizing: content-box yes the padding and border is added on top of the width, including any fixed width you define .

BadBoy_YTOP•2mo ago

it works for fixed widths and heights , when i hover, it is adding the border width to the content keeping the width of element unchanged (however it is not practical as you said keeping the widths and heights fixed make the things terrible)

clevermissfox•2mo ago

If you add box-sizing : border-box and have a fixed width yes the padding and border is accounted for within the defined width. But you had asked about content -box, where border and padding will be added on top of the defined width

BadBoy_YTOP•2mo ago

Yes, thanks

Gaming

Programming

fix border layout on hover