deleted 7 characters in body

edited Aug 14, 2024 at 14:00

21.3k
84
84
121

2023 - singleSingle element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 100vw white; /* A transparent border, so the very edge of the button shows through */ border: 2px solid transparent; }

<button class="gradient-border">Hello</button>

2023 - single element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 100vw white; /* A transparent border, so the very edge of the button shows through */ border: 2px solid transparent; }

<button class="gradient-border">Hello</button>

Single element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 100vw white; /* A transparent border, so the very edge of the button shows through */ border: 2px solid transparent; }

<button class="gradient-border">Hello</button>

deleted 1 character in body

Source Link

edited Aug 14, 2023 at 9:57

mikemaccana

126.1k
113
441
544

2023 - single element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 1000px100vw white; /* A transparent border, so the very edge of the button shows through */ border: 2px solid transparent; }

<button class="gradient-border">Hello</button>

2023 - single element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 1000px white; /* A transparent border, so the very edge of the button shows through */ border: 2px solid transparent; }

<button class="gradient-border">Hello</button>

2023 - single element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 100vw white; /* A transparent border, so the very edge of the button shows through */ border: 2px solid transparent; }

<button class="gradient-border">Hello</button>

deleted 8 characters in body

Source Link

edited Jun 13, 2023 at 21:05

mikemaccana

126.1k
113
441
544

2023 - single element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 1000px white; /* A transaprenttransparent border, so the very edge of the button shows through */ border: 2px solid transparent;  }

<button class="gradient-border">Hello</button>

2023 - single element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 1000px white; /* A transaprent border, so the very edge of the button shows through */ border: 2px solid transparent;  }

<button class="gradient-border">Hello</button>

2023 - single element, no pseudo elements, no SVG, no masks.

I can't take credit for this, I saw this on a website (I forgot the site and can't find it again).

It's just a normal button with rounded edges and a gradient background
It uses a box-shadow that is inset to fill the inside with white
It has a 2px border which is actually transparent, so the very edge of the button shows through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* Fill the inside with white */ background-origin: border-box; box-shadow: inset 0 1000px white; /* A transparent border, so the very edge of the button shows through */ border: 2px solid transparent; }

<button class="gradient-border">Hello</button>

added 197 characters in body

Source Link

edited May 20, 2023 at 20:48

mikemaccana

126.1k
113
441
544

Loading

Source Link

answered May 20, 2023 at 20:23

mikemaccana

126.1k
113
441
544

Loading

Collectives™ on Stack Overflow

Return to Answer

2023 - singleSingle element, no pseudo elements, no SVG, no masks.

2023 - single element, no pseudo elements, no SVG, no masks.

Single element, no pseudo elements, no SVG, no masks.

2023 - single element, no pseudo elements, no SVG, no masks.

2023 - single element, no pseudo elements, no SVG, no masks.

2023 - single element, no pseudo elements, no SVG, no masks.

2023 - single element, no pseudo elements, no SVG, no masks.

2023 - single element, no pseudo elements, no SVG, no masks.

2023 - single element, no pseudo elements, no SVG, no masks.