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

Had to [scratch an itch](https://twitter.com/LukyVJ/status/1711710375870071195).  ✨ no text duplication (`text-shadow` tricks 😼) ✨ light & dark mode ([...

<div><p>Had to <a href="https://twitter.com/LukyVJ/status/1711710375870071195">scratch an itch</a>.</p>

<p>✨ no text duplication (<code>text-shadow</code> tricks 😼)
✨ light &amp; dark mode (<a href="https://twitter.com/anatudor/status/1588773404022169606">using <code>color-mix()</code></a>)
✨ JS needed only for that subtle glow following mouse motion on <code>:hover</code> (no JS, glow just grows without following cursor); hopefully this <a href="https://twitter.com/anatudor/status/1704873894530757050">can change in the future</a> 
✨ clean, compact code</p>

<p><strong>TODO</strong>: maybe polish up the easings at some point</p></div>

thebabydino

Button effect on :hover/ :focus

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>

download button (click me!)

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>

Buttons using the tag:javascript

Buttons using the tag:
javascript