rxctionzz

<button style="padding:20px;">Open popup</button>

rxctionzz

Gooey button hover effect with SVG filters & CSS

Originally developed for https://prodi.gy. Uses the "gooey" SVG filter on top of a button element, and pseudo-elements with hover transitions for "bubbles".

For more details on the goo filter, see this post by CSS Tricks: https://css-tricks.com/gooey-effect/

A Pen by Ines Montani on CodePen.

License.

rxctionzz

Custom JSX Function

A Pen by Chris Coyier on CodePen.

License.

rxctionzz

Preact + JSX

A Pen by Chris Coyier on CodePen.

License.

rxctionzz

_ Particle Trails _

Trails of particles started in circles into canvas. The canvas is not clean for build trails.

A Pen by Jeremie Boulay on CodePen.

License.

rxctionzz

<input type="checkbox" id="debug" />

<ul class="cards" id="cards">
    <li id="card_0">
        <img draggable="false" src="https://assets.codepen.io/89905/coverflow--Front-1024x1024.jpg" width="1200" height="1200" />
    </li>
    <li id="card_1">
        <img draggable="false" src="https://assets.codepen.io/89905/coverflow--A-Thousand-Clouds-Front-Cover-1024x1024.jpg" width="1200" height="1200" />
    </li>
    <li id="card_2">

rxctionzz

<input type="checkbox" id="debug" />

<ul class="cards" id="cards">
    <li id="card_0">
        <img draggable="false" src="https://assets.codepen.io/89905/coverflow--Front-1024x1024.jpg" width="1200" height="1200" />
    </li>
    <li id="card_1">
        <img draggable="false" src="https://assets.codepen.io/89905/coverflow--A-Thousand-Clouds-Front-Cover-1024x1024.jpg" width="1200" height="1200" />
    </li>
    <li id="card_2">

rxctionzz

<div>
	<label>Switch</label>
	<input name="cb1" id="cb1" type="checkbox" />
	<label for="cb1"><span></span></label>
</div>

rxctionzz

<div class="container"></div>

rxctionzz

<div class="container"></div>