New: - mobile compatible with touch events - Create buttons with markup elements - Rendered with SVGs for better view on high res panels   Create liqui...

<div><p>New:
- mobile compatible with touch events
- Create buttons with markup elements
- Rendered with SVGs for better view on high res panels</p>

<p>Create liquid buttons on all elements with class <code>liquid-button</code> pass all parameters as data attributes. Play around with parameters on <a href="https://codepen.io/Zaku/pen/WObjPy" target="_blank">https://codepen.io/Zaku/pen/WObjPy</a></p>

<p>Most important <code>data-</code> attributes:
<code>data-width</code>: width of button
<code>data-height</code>: height of button
<code>data-margin</code>: additional space around button on svg for button overflow
<code>data-force-factor</code>: Force for each point to get back to its origin
<code>data-hover-factor</code>: Force for each point to get back to its origin while hover
<code>data-color1</code>: Background color
<code>data-color2</code>: Foreground color
<code>data-color3</code>: Highlight color
<code>data-text-color</code>: Text color</p>

<p>Layer settings can be made for layer <code>1</code> (background) and layer <code>2</code> (foreground)
<code>layer-X-viscosity</code>: Defines how elastic mouse interactions are
<code>layer-X-mouse-force</code>: Defines how far and strong mouse force reaches
<code>layer-X-force-limit</code>: Limits local force to specific amount</p></div>

▶ Liquid Button v2

You might also like: