@willykleitinho
Posted
The problem isn't on box-sizing. If you're talking about the buttons growing, that happens because you're adding a border to the button, instead of just changing it's color. Try adding a border of the desired width to the element without pseudo-selectors, and set it's background color to the button's background color.
@sophiestrausberg
Posted
@willykleitinho Thanks! I was able to get the buttons to stop growing on hover following your advice. From my understanding, though, I should have been able to use "box-sizing: border-box" to include the border in the calculations of the width and height. So the content box should have shrunk to absorb the extra size, and the total height + width should have remained the same. I'm not sure why I can't get it to work. Am I misunderstanding its usage? appreciate the help <3
@willykleitinho
Posted
@sophiestrausberg That's exactly what should happen IF you give your element width and height, explicitly (maybe I'm wrong on that). Your buttons were increasing because they don't have a defined height, it's based only on the padding and the font-size, so it was free to grow, but the width didn't change because it's set to 100% (because of Flexbox, I guess).
Marked as helpful
