A glowing hover effect that follows your cursor. Built with HTML, CSS, and a bit of JS using CSS variables. Perfect for buttons, CTAs, and Webflow-insp...

<div><p>A glowing hover effect that follows your cursor.
Built with HTML, CSS, and a bit of JS using CSS variables.
Perfect for buttons, CTAs, and Webflow-inspired interactions.</p></div>

Franbeltramella

Button Hover Effect: Cursor-Based Glow Pulse

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

Classy Button: A Sleek & Responsive Button with Subtle Elegance   A stylish, modern button with a subtle gradient, smooth hover effects, and a touch of...

<div><p>Classy Button: A Sleek &amp; Responsive Button with Subtle Elegance </p>

<p>A stylish, modern button with a subtle gradient, smooth hover effects, and a touch of class. Built with CSS variables for easy customization, it’s fully responsive and scales beautifully across all devices. </p></div>

mark_sottek

Classy Button: A Sleek & Responsive Button with Subtle Elegance

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

<div><p>Source: <a href="https://youtu.be/0N87f5wfxr0" target="_blank">https://youtu.be/0N87f5wfxr0</a></p></div>

Juxtopposed

Shattering Cursor

Futuristic and organic button styles with hover effect. In orange and blue for the cpc-orange-blue challenge. Uses the backdrop-filter effect for a sli...

<div><p>Futuristic and organic button styles with hover effect.
In orange and blue for the cpc-orange-blue challenge.
Uses the backdrop-filter effect for a slight frosty glass effect.
CSS via Sass as preprocessor, HTML via Pug. No Javascript in use.
You are free to use it, but I don't recommend to use this in production without revision and testing :)</p>

<p>Image: <a href="https://www.pexels.com/photo/mountain-photo-during-nighttime-2086917/" target="_blank">https://www.pexels.com/photo/mountain-photo-during-nighttime-2086917/</a></p></div>

jouanmarcel

Futuristic Button Styles (Fire & Ice)

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

<div><p>Modern css techniques, no JS needed</p></div>

LukyVj

Success morphing 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

imedeli

Double layer animated button

Just a metallic button with some animation and color change added to it, for use....

<div><p>Just a metallic button with some animation and color change added to it, for use.</p></div>

cmillard

WIP Metal Button

Clicking on the button will give you a random scare.  It should have had some "treats" but I ran out of time....

<div><p>Clicking on the button will give you a random scare.  It should have had some "treats" but I ran out of time.</p></div>

cbolson

[cpc] 👻 Halloween 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>

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

A single element button styled by one class to have an iridescent effect.  A simple Codepen for fun! :D ...

<div><p>A single element button styled by one class to have an iridescent effect.</p>

<p>A simple Codepen for fun! :D </p></div>

Pedro-Ondiviela

Iridescent Button - Single element

jdillon

Animated gradient buttons with GSAP and tsParticles

francoiscoron

Button hover effects

Made for this video: https://www.youtube.com/watch?v=--4n9c4-h1Y...

<div><p>Made for this video: <a href="https://www.youtube.com/watch?v=--4n9c4-h1Y" target="_blank">https://www.youtube.com/watch?v=--4n9c4-h1Y</a></p></div>

Fancy Glowing Button

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>

Buttons using the tag:button

Buttons using the tag:
button