A little [coding challenge](https://twitter.com/avstorm/status/1719302047311212913)....

<div>A little <a href="https://twitter.com/avstorm/status/1719302047311212913">coding challenge</a>.</div>

thebabydino

Pure CSS gravity button (no Firefox yet)

Pure CSS grow & slide in button

The code builds on some other things I've made in the past like:  * [adding graininess to gradient](https://codepen.io/thebabydino/pen/abjpEbz) ([detai...

<div>The code builds on some other things I've made in the past like:

<ul>
<li><a href="https://codepen.io/thebabydino/pen/abjpEbz">adding graininess to gradient</a> (<a href="https://stackoverflow.com/a/75054687/1397351">detailed explanation</a> of SVG code)</li>
<li><a href="https://codepen.io/thebabydino/pen/abVgQJB/d5509feda55bc5d205666dbe6db4fc67">inset shadow on irregular shapes</a></li>
<li><a href="https://codepen.io/thebabydino/pen/RwjzEpm">emboss effect</a></li>
</ul>

<hr>

<a href="https://twitter.com/Aximoris/status/1623964038542639107">Visual inspiration</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 (you'll also get to see some cool stuff you won't see done with CSS/ SVG elsewhere)</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>making a weekly anonymous donation via Liberapay </li>
</ul>

<a href="https://liberapay.com/anatudor/"><img src="https://assets.codepen.io/2017/btn_liberapay.svg" alt="Liberapay"></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 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>

Just code, no images: soft round buttons

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>

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

Pure CSS adaptation of [this design](https://twitter.com/buttons_cool/status/1712908919486447835)....

<div>Pure CSS adaptation of <a href="https://twitter.com/buttons_cool/status/1712908919486447835">this design</a>.</div>

Pure CSS retro button

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>

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>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>. 

From <a href="https://dribbble.com/shots/483825-Download-Button-Concept">Dribble</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 (you'll also get to see some cool stuff you won't see done with CSS/ SVG elsewhere)</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>making a weekly anonymous donation via Liberapay </li>
</ul>

<a href="https://liberapay.com/anatudor/"><img src="https://assets.codepen.io/2017/btn_liberapay.svg" alt="Liberapay"></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 world what can be done with CSS these days</li>
</ul>

Thank you!</div>

All the buttons from thebabydino