A Liquid effect button built using SVG and vanilla JS, NPM Repository.
Live Demo - https://rajesh-royal.github.io/liquid-button/build/
Rajesh-Royal / liquid-button
A repository which helps you in creating react-liquid-button
Liquid Button
A Liquid effect button built uisng svg and vanila JS, NPM Repository
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 asimport 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…
-
Top comments (0)