SVG Liquid Button

This project starts in response to Andreas Storm tweet and is based on Antonio Petre animation.

You can see in action here.

Install

🚨 IMPORTANT ADVICE This component is experimental and is not tested yet.

For now it's only available in the browser version.

Download this repo and extract svg-liquid-button.min.js from lib folder.

Import script:

<script src="..svg-liquid-button/lib/svg-liquid-button.min.js" charset="utf-8"></script>

Usage

Some properties need be defined through data attributes directly on your <button> or <a> components:

<button class="btn liquid"
        data-placeholder="I'm a button"
        data-textstyle="fill: #36DFE7; font-size: 16px; letter-spacing: 0.08em;"
        data-padding="20"
        data-basecolor="#36DFE7"
        data-gradient="#A24AF8, #6F42EC"><svg></svg></button>

Then, initialize it:

const btns = document.querySelectorAll('.btn.liquid')
for (let btn of btns) {
  new LiquidButton(btn)
}

API

Prop	Type	Description
data-placeholder	string	Text to show in the button.
data-textstyle	string	Custom styles for the text.
data-padding	string	Margin (px) between the button and svg component.
data-basecolor	string	Color for the base layer.
data-basecolor	string	Colors for the top layer gradient.