reset-button.css

%reset-Button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;

    background: transparent;

    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;

    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;

    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;

    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none;
}

/* Remove excess padding and border in Firefox 4+ */
&::-moz-focus-inner {
    border: 0;
    padding: 0;
}

I think nowadays you just need this:

button {
  all: unset;
}

It starts inheriting all the values like you'd expect, with the exception that:

• it still behaves like inline-block
• the text is still vertically centered

This also removes the default outline from the button when it's focused which makes it completely inaccessible when using keyboard navigation. Be sure to style a custom outline. I tried using outline: revert at it seems to work OK in Chrome, Edge, Firefox and Safari, so for modern browsers I suggest keeping these 2 rules always together and use a mixin for that, so no one forgets.

@mixin u-button-reset() {
  all: unset;
  outline: revert;
}

I think nowadays you just need this:

button {
  all: unset;
}

It starts inheriting all the values like you'd expect, with the exception that:

• it still behaves like inline-block
• the text is still vertically centered

boss 🤯

`.reset-Button {
border: none;
outline: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;

background: transparent;

/* inherit font & color from ancestor */
color: inherit;
font: inherit;

/* Normalize line-height. Cannot be changed from normal in Firefox 4+. */
line-height: normal;

/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;

/* Corrects inability to style clickable input types in iOS */
-webkit-appearance: none;
}
.reset-Button::-moz-focus-inner {
border: 0;
padding: 0;
}
.reset-Button:focus {
outline: none;
}
.reset-Button:focus:not(:focus-visible) {
outline: none;
}
.reset-Button:focus:not(:-moz-focusring) {
outline: none;
}`