DEV Community

Cover image for An NPM package for fancy liquid-buttons
Rajesh Royal
Rajesh Royal

Posted on

4 1

An NPM package for fancy liquid-buttons

A Liquid effect button built using SVG and vanilla JS, NPM Repository.

Live Demo - https://rajesh-royal.github.io/liquid-button/build/

GitHub logo Rajesh-Royal / liquid-button

A repository which helps you in creating react-liquid-button

Liquid button preview

Liquid Button

A Liquid effect button built uisng svg and vanila JS, NPM Repository

Tweet

TO use the LIquid button in your project -

    • npm install liquid-button
    • Then Import liquid-button in your react project

    import LiquidButton from 'LiquidButton/src/LiquidButton' if generate error then copy the LiquidButton.js file from the node_moudle folder and paste inside your src folder and import as import LiquidButton from './LiquidButton'

    • use <LiquidButton class="your-class-name-here" name="FirstButton" background="black" firstcolor="#1e88e5" secondcolor="yellow" /> -------- put your desired colors -----

      You should have different class name each time you are using the component like -

      ReactDOM.render(<div> <LiquidButton class="liquid-button" name="FirstButton" background="black" firstcolor="#1e88e5" secondcolor="yellow" /> <LiquidButton class="liquid-button2" name="FirstButton" background="black" firstcolor="#1e88e5" secondcolor="yellow" /> </div>, document.getElementById('root'));

      see the above example it will show 2 buttons if you want to use more than your class name should be different each time.

      Now you can use more than one liquid-buttons on same page.

      Feel free to contribute…





share your projects 👍👇👇

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more