Inspired by the tweets from @zielinskiwoj ;  https://x.com/zielinskiwoj/status/1955291261327315098   && https://x.com/zielinskiwoj/status/1956001707533...

<div><p>Inspired by the tweets from @zielinskiwoj ;</p>

<p><a href="https://x.com/zielinskiwoj/status/1955291261327315098" target="_blank">https://x.com/zielinskiwoj/status/1955291261327315098</a>
  &amp;&amp;
<a href="https://x.com/zielinskiwoj/status/1956001707533509011" target="_blank">https://x.com/zielinskiwoj/status/1956001707533509011</a></p></div>

simeydotme

Glassy Iridescent Button

A shiny, glinty button! Animated using CSS, with some light extras like a `box-shadow` and some light text glow on hover.  The glint effect (the fast, ...

<div><p>A shiny, glinty button! Animated using CSS, with some light extras like a <code>box-shadow</code> and some light text glow on hover.</p>

<p>The glint effect (the fast, moving background) is an animated <code>::after</code> element on the main <code>&lt;div&gt;</code>. Nothing too fancy there: the pseudo-element has a linear gradient <code>background-image</code>, and the element's position is animated from a negative <code>left</code> value up 'til it's out of the parent div. Importantly, the parent needs <code>overflow: hidden</code> set in order to prevent its child pseudo-element from being hoverable.</p>

<p>The linear gradient on the border was an interesting case study. My first thought was just to use the normal linear gradient, but set it using the <code>border-image</code> property. That doesn't work! </p>

<p>A great explanation for this behavior can be found in the MDN Docs: (from <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#rounded_borders" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#rounded_borders</a>), but long story short: "background" images applied to borders feature a <code>border-image-outset</code> property that allows you to set a distance from the element's <code>border-box</code> that the background image appears. To enable that behavior, border images must (somewhat obviously) not clip to the border box. Unfortunately, that also means ignoring border radii.</p>

<p>The solution proposed by the MDN doc is to essentially fake it: don't use a border at all. Instead, extend the "actual" element's background to the dimensions you want, including the proposed border. Use two backgrounds: one that contains the border color itself and one that acts as the element's background color. Set the <code>background-origin</code> property to <code>border-box</code> to enable the fake border's gradient to appear in the space the real border would normally occupy, then set <code>background-clip</code> for the element's background to <code>padding-box</code> (to color only the primary element content) and the second background to <code>border-box</code> (to restrict the second background's color to the faked border). Apply a <code>padding</code> to your element: this value defines the thickness of the faked border. Apply a border radius to your element to achieve the rounded effect, and you're in!</p>

<p>Animating the border to shine is as simple as animating the <code>background-position</code> of the second border from a value off the left side of the element to a value off the right side. A few things to note here:</p>

<ul>
<li><code>background-size</code> is set to <code>100% 200%</code> to make sure that the gradient doesn't expose the edges of the background image.</li>
<li>When animating the <code>background-position</code> property, be sure to change only the <em>second</em> background's values (the border background). The first background's values still need to be present, but they should stay the same throughout the animation.</li>
<li>The actual shine gradient coloration only appears over a very small portion of the background image (somewhere around 45% to 55%). Tweaking those values leads to some very satisfying nuance in the image.</li>
</ul></div>

carvacodes

Shiny Glinty Button

based on two existing pens I did before; - https://codepen.io/simeydotme/pen/GRzVKqr - https://codepen.io/simeydotme/pen/gOqNxRa...

<div><p>based on two existing pens I did before;
- <a href="https://codepen.io/simeydotme/pen/GRzVKqr" target="_blank">https://codepen.io/simeydotme/pen/GRzVKqr</a>
- <a href="https://codepen.io/simeydotme/pen/gOqNxRa" target="_blank">https://codepen.io/simeydotme/pen/gOqNxRa</a></p></div>

Multiple Glow effects Button

I found this cool design on Twitter and wanted to re-create it with CSS...

<div><p>I found this cool design on Twitter and wanted to re-create it with CSS</p></div>

Rainbow Creator Button

Reproduced the Glassy button from Markus on Dribbble: https://dribbble.com/shots/23129994-Glassy-button  Thanks https://x.com/ChallengesCss for the hel...

<div><p>Reproduced the Glassy button from Markus on Dribbble: <a href="https://dribbble.com/shots/23129994-Glassy-button" target="_blank">https://dribbble.com/shots/23129994-Glassy-button</a></p>

<p>Thanks <a href="https://x.com/ChallengesCss" target="_blank">https://x.com/ChallengesCss</a> for the help with anchor positioning</p></div>

LukyVj

Glassy button + Popover

A button that can cancel the action within a defined time. A gooey effect (SVG filter) is used.  Works great in Chromium and Firefox....

<div><p>A button that can cancel the action within a defined time. A gooey effect (SVG filter) is used.</p>

<p>Works great in Chromium and Firefox.</p></div>

konstantindenerz

Gooey Approve Button (With Cancel)

Set the ripple count and make those borders wave...

<div><p>Set the ripple count and make those borders wave</p></div>

hexagoncircle

CSS border ripple effect

I'm making a cool button that looks like those fancy ones on Twitter, with borders that spin around....

<div><p>I'm making a cool button that looks like those fancy ones on Twitter, with borders that spin around.</p></div>

CodeBreaker02

Rotating border

After seeing Ana's SVG Gooey Filter , I knew I had to combine it with some of my previous pens to make this Gooey button effect!...

<div><p>After seeing Ana's SVG Gooey Filter , I knew I had to combine it with some of my previous pens to make this Gooey button effect!</p></div>

Gooey SVG Filter Button

It's fun pen to demonstrate some (S) CSS features ✨ like CSS Variables,  Gradients, Animations & Transitions, Clip Path and SCSS functions ...

<div><p>It's fun pen to demonstrate some (S) CSS features ✨ like CSS Variables,  Gradients, Animations &amp; Transitions, Clip Path and SCSS functions </p></div>

Arcade Button 👾🕹️ (Pure CSS, Animated)

I was really inspired by an old button from Aaron which had a glowing edge, using an SVG effect. I wanted to see if I can create something similar with...

<div><p>I was really inspired by an old button from Aaron which had a glowing edge, using an SVG effect. I wanted to see if I can create something similar with CSS only.  </p>

<p>I really love this.</p></div>

CSS Only Shimmer Button

An exploration of animated multi-color conic gradients to create button border animation effects....

<div><p>An exploration of animated multi-color conic gradients to create button border animation effects.</p></div>

collinsworth

Shimmering animated border gradient effect in CSS

Using Gradients, Variables and Filters / Blending to create a really convincing Aqua button as seen on Twitter...

<div><p>Using Gradients, Variables and Filters / Blending to create a really convincing Aqua button as seen on Twitter</p></div>

Aqua Button (pure css)

CSS Tip! https://twitter.com/ChallengesCss/status/1531230246925737984...

<div><p>CSS Tip!
<a href="https://twitter.com/ChallengesCss/status/1531230246925737984" target="_blank">https://twitter.com/ChallengesCss/status/1531230246925737984</a></p></div>

t_afif

CSS only 3D perspective button

stix

Prism Button Effect

CSS Tip! https://twitter.com/ChallengesCss/status/1499394016659398663...

<div><p>CSS Tip!
<a href="https://twitter.com/ChallengesCss/status/1499394016659398663" target="_blank">https://twitter.com/ChallengesCss/status/1499394016659398663</a></p></div>

CSS only Ripple effect

Inspired by @lukyvj many recent buttons and css expirments recently I wanted to do my own one!...

<div><p>Inspired by @lukyvj many recent buttons and css expirments recently I wanted to do my own one!</p></div>

Sparkly Button

this is my first pen, i hope you like it. if you like it make sure to give it a like and give me your thoughts in the comments section bellow :) if you...

<div><p>this is my first pen, i hope you like it.
if you like it make sure to give it a like and give me your thoughts in the comments section bellow :)
if you want to get my updates folow me on twitter: @salihcodes</p></div>

salihbenlalla

Button neon effect

A flexible, scalable, totally designable 100% CSS fantasy style button by Jane Ori based on design by @rogie...

<div><p>A flexible, scalable, totally designable 100% CSS fantasy style button by Jane Ori based on design by <a href="https://codepen.io/rogie" target="_blank">@rogie</a></p></div>

propjockey

100% CSS Fantasy Buttons - Highly Customizable

CSS Tip! https://twitter.com/ChallengesCss/status/1571818247531495432...

<div><p>CSS Tip!
<a href="https://twitter.com/ChallengesCss/status/1571818247531495432" target="_blank">https://twitter.com/ChallengesCss/status/1571818247531495432</a></p></div>

Buttons using the tag:css

Buttons using the tag:
css