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

Don't forget that text in a button is vertically centered.
https://stackoverflow.com/questions/15764600/what-makes-the-text-on-a-button-element-vertically-centered

If you stumbled upon this ancient(in web timeline) gist and want to remove outlines consider using:

  :focus:not(:focus-visible) {
    outline: none;
  }
  :focus:not(:-moz-focusring) {
    outline: none;
  }

This removes them only for mouse clicks in modern browsers.
moz-focusring selector removed it in older Firefox browsers. Just be sure to know witch browsers you need to support as legacy 🥔 browsers will still display outlines.

@povilasbaranovas This was quite interesting, thanks. The MDN article on :focus-visible does note that Safari support is lacking, though there's a polyfill using Javascript.

This gist is indeed ancient and incomplete.

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

I think nowadays you just need this:

button {
  all: unset;
}

Lol. Never seen a more powerful one-liner in my entire career. Thanks, @fregante

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