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

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

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

francoiscoron

Button hover effects

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

<div><p>Send button animation - Paper Plane</p></div>

milanraring

Send button animation

aaroniker

Button w/ animated gradient

natszafraniec

Grainy buttons

Quick button challenge.  Very quick and dirty version of this example: - https://twitter.com/LukyVJ/status/1714563142859010192...

<div><p>Quick button challenge.</p>

<p>Very quick and dirty version of this example:
- <a href="https://twitter.com/LukyVJ/status/1714563142859010192" target="_blank">https://twitter.com/LukyVJ/status/1714563142859010192</a></p></div>

uixmat

Button Shimmer

Button with an interactive border gradient.  More: https://www.stefanjudis.com/today-i-learned/background-clip-is-configurable-for-every-background-gra...

<div><p>Button with an interactive border gradient.</p>

<p>More: <a href="https://www.stefanjudis.com/today-i-learned/background-clip-is-configurable-for-every-background-gradient-separately/" target="_blank">https://www.stefanjudis.com/today-i-learned/background-clip-is-configurable-for-every-background-gradient-separately/</a></p></div>

electerious

Interactive button border

Click it! Live coded in 30 minutes on the 6th of December 2015. Should work like in [this recording](https://twitter.com/anatudor/status/67327801465916...

<div><p>Click it! Live coded in 30 minutes on the 6th of December 2015. Should work like in <a href="https://twitter.com/anatudor/status/673278014659166209">this recording</a>.  </p>

<p>From <a href="https://dribbble.com/shots/483825-Download-Button-Concept">Dribble</a>.</p>

<hr>

<p>If the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:</p>

<ul>
<li>being a cool cat 😼🎩 and becoming a patron on Patreon (you'll also get to see some cool stuff you won't see done with CSS/ SVG elsewhere)</li>
</ul>

<p><a href="https://www.patreon.com/anatudor"><img src="https://assets.codepen.io/2017/btn_patreon.png" alt="become a patron button"></a></p>

<ul>
<li>making a one time donation via Ko-fi</li>
</ul>

<p><a href="https://ko-fi.com/anatudor"><img src="https://assets.codepen.io/2017/btn_kofi.svg" alt="ko-fi"></a></p>

<ul>
<li>making a weekly anonymous donation via Liberapay </li>
</ul>

<p><a href="https://liberapay.com/anatudor/"><img src="https://assets.codepen.io/2017/btn_liberapay.svg" alt="Liberapay"></a></p>

<ul>
<li>getting me something off my Amazon WishList </li>
</ul>

<p><a href="https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/">🎁 🇺🇸</a> / <a href="https://www.amazon.co.uk/gp/registry/wishlist/2I25W7U0KADSR/">🎁 🇬🇧</a></p>

<ul>
<li>or at least sharing this to show the world what can be done with CSS these days</li>
</ul>

<p>Thank you!</p></div>

thebabydino

download button (click me!)

Click on the button, and a panda rolls out and dances around the screen....

<div><p>Click on the button, and a panda rolls out and dances around the screen.</p></div>

Ma5a

panda button

Buttons with simple clip path animations on focus...

<div><p>Buttons with simple clip path animations on focus</p></div>

jdillon

Clip path button focus effects, updated to support mobile browsers

A 3D button with a shadow that happens when you hover your mouse over it....

<div><p>A 3D button with a shadow that happens when you hover your mouse over it.</p></div>

creativenines

Button Cursor Follow Shadow

Button with a subtle hover animation based on the Baldurs Gate 3 game UI - design is done by Rogie https://twitter.com/rogie/status/1707376313798140230...

<div><p>Button with a subtle hover animation based on the Baldurs Gate 3 game UI - design is done by Rogie <a href="https://twitter.com/rogie/status/1707376313798140230" target="_blank">https://twitter.com/rogie/status/1707376313798140230</a></p></div>

CSS Baldurs Gate 3 Button Hover Animation ✨

A submit button concept in which it turns into a ring, fills up, turns into a check circle, and back....

<div><p>A submit button concept in which it turns into a ring, fills up, turns into a check circle, and back.</p></div>

jkantner

Morphing Submit Button

An animated delete button where the letters fly straight into the trash can! Based on the same in [this Dribbble shot](https://dribbble.com/shots/15235...

<div><p>An animated delete button where the letters fly straight into the trash can! Based on the same in <a href="https://dribbble.com/shots/15235682-Delete-Button">this Dribbble shot</a> by Maria of CXDojo.</p></div>

Delete Button Animation

Light and dark toggle buttons with a little glow in the center. Based on the one in [this Dribbble shot](https://dribbble.com/shots/14278079-Daily-UI-0...

<div><p>Light and dark toggle buttons with a little glow in the center. Based on the one in <a href="https://dribbble.com/shots/14278079-Daily-UI-015-On-Off-Switch">this Dribbble shot</a> by Rahul Agarwal.</p>

<p>Update 2/11/23: Ditched responsive font sizing due to box shadow issues while resizing the window</p></div>

Buttons using the tag:animation

Buttons using the tag:
animation