In the button design, the border is 'inside' which means that the padding should be including border width. The Figma css code was unfortunately misleading, which resulted in an implementation where the focus state that was 2px larger than the other states, which can cause button and layout jumps.
This PR is to make the button the correct and consistent size for all states by subtracting the border width from the padding.
Button can for instance be checked on a "Pagina niet gevonden" (/some-not-existing-page). Focus the button with tab and the expected behaviour is that it should stay where it is.
In the button design, the border is 'inside' which means that the padding should be including border width. The Figma css code was unfortunately misleading, which resulted in an implementation where the focus state that was 2px larger than the other states, which can cause button and layout jumps.
This PR is to make the button the correct and consistent size for all states by subtracting the border width from the padding.
Button can for instance be checked on a "Pagina niet gevonden" (
/some-not-existing-page). Focus the button with tab and the expected behaviour is that it should stay where it is.