yogit

Click, Jump, Flip, Repeat

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)

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

ghaste

Hand Drawn Buttons

Aurora style button for https://incredibles.dev website....

<div><p>Aurora style button for <a href="https://incredibles.dev" target="_blank">https://incredibles.dev</a> website.</p></div>

wodniack

incredibles / Aurora 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><p>The code builds on some other things I've made in the past like:</p>

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

<p><a href="https://twitter.com/Aximoris/status/1623964038542639107">Visual inspiration</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>

<hr>

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

thebabydino

Just code, no images: soft round buttons

Anna_Batura

Button | #cpc-click-button#codepenchallenge

A button with a fun confetti click animation written with css and  JavaScript...

<div><p>A button with a fun confetti click animation written with css and  JavaScript</p></div>

zanewesley

Animated Button

Based on [Send Button UI Interaction/Animation](https://dribbble.com/shots/12072574-Send-Button-UI-Interaction-Animation) by [Saransh Agarwal](https://...

<div><p>Based on <a href="https://dribbble.com/shots/12072574-Send-Button-UI-Interaction-Animation">Send Button UI Interaction/Animation</a> by <a href="https://dribbble.com/sar123">Saransh Agarwal</a></p></div>

Buttons using the tag:codepenchallenge

Buttons using the tag:
codepenchallenge