V1 Button changes width on hover when the button is outlined AND rounded

[daveHylde]

This is about Bulma.

Overview of the issue

This is about the Bulma CSS framework
I'm using Bulma version 1.0.0
My browser is: firefox
This is a Sass issue: I'm using version 1.0.0
I am sure this issue is not a duplicate

Description

When a button is outlined and rounded the width of the button changes on hover causing the content to jump.

This is only an issue when both modifiers are present on the button. A normal outlined button does not jump.

Steps to Reproduce

<button class="button is-outlined is-rounded" onclick="alert('I love bulma')">
    I have a bug
</button>

Expected behavior

border should expand inwards without changing the width of the button.

Actual behavior

button gets wider when hovered than it's none-hovered version.

[Zeddicus414]

Yep, I can confirm that I'm seeing the same issue.

[fatcarter]

same issue

[fatcarter]

This seems to work

.button.is-rounded{
  padding-left: calc(var(--bulma-button-padding-horizontal) - var(--bulma-button-border-width) + 0.25em);
  padding-right: calc(var(--bulma-button-padding-horizontal) - var(--bulma-button-border-width) + 0.25em);
}