/svg-liquid-button

An SVG button with liquid effect

Primary LanguageJavaScriptMIT LicenseMIT

SVG Liquid Button

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

svg liquid button gif

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.