Inspiration: [neumorphism - social buttons](https://dribbble.com/shots/10746021-Neumorphism-Social-Buttons).  ---  If the work I've been putting out si...

<div>Inspiration: <a href="https://dribbble.com/shots/10746021-Neumorphism-Social-Buttons">neumorphism - social buttons</a>.

<hr>

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:

<ul>
<li>being a cool cat 😼🎩 and becoming a patron on Patreon</li>
</ul>

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

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

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

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

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

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

Thank you!

<hr>

Dedicated to the memory of someone dear who passed away in January 2019. Missing you every day.</div>

thebabydino

#codeVember #4/2021: soft buttons (hover/ focus and press - keep pressed, release, click fast, play with it 🤪)

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

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

✨ 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

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

Buttons using the tag:css-variables

Buttons using the tag:
css-variables