<gradient-button>

What is it?

The challenge was to create, with CSS only, a rounded button with transparent background, gradient border and gradient text, which on hover fills the background with the gradient and switches the text to a solid color.

⚠️ There is an issue with the gradient bleeding through the edge of the button when the border-width is zero and the border is rounded.

Examples of use

• HTML

  <gradient-button>Gradient button</gradient-button>

  Output

  Gradient button

• HTML

  <style>.small::part(button) { border-radius: 8px; }</style>
  <gradient-button class="small">Smaller radius</gradient-button>

  Output

  Smaller radius

• HTML

  <style>.big::part(button) { border-width: .3em; }</style>
  <gradient-button class="big">Bigger border</gradient-button>

  Output

  Bigger border

• HTML

  <style>.no-border::part(button) { border: none; }</style>
  <gradient-button class="no-border">No border</gradient-button>

  Output

  No border