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

daveHylde commented 2 months ago

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 commented 1 month ago

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

fatcarter commented 1 month ago

same issue

fatcarter commented 4 weeks ago

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);
}

jgthms / bulma