How to remove the default button styles

Short answer

Reset the background, border and padding, and inherit the font and color from the parent:

<style>
  .plain { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
</style>
 
<p>Price: $25 <button class="plain">✎ edit</button></p>

Such a button looks like plain text but stays a button: it can be pressed from the keyboard and is understood by screen readers.

Resetting everything in one line

all: unset removes all styles at once, including the browser ones. Then bring back what you need:

<style>
  .reset { all: unset; cursor: pointer; color: steelblue; }
  .reset:focus-visible { outline: 2px solid orange; }
</style>
 
<button class="reset">Show more</button>

A button as a link

If an action looks like a link in the text ("show more", "cancel"), give the reset button the link color and underline. The tag stays <button>, because it is an action, not navigation.

Common mistake

After all: unset the focus outline is gone too — the button is no longer visible from the keyboard. Add a :focus-visible rule, as in the second example. One more trap: all: unset resets display, and the button becomes inline, so width and vertical padding do not apply until you set display: inline-block.