DEV Community

loading...
Cover image for An NPM package for fancy liquid-buttons

An NPM package for fancy liquid-buttons

rajeshroyal profile image Rajesh Royal ・1 min read

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

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

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 👍👇👇

Discussion (0)

pic
Editor guide