Wave Button
Just button, but it's cool!
Installation
npm i wave-buttonUsage
import { WaveButton } from 'wave-button'
import 'wave-button/dist/style.css'
function App() {
return <WaveButton>Button</WaveButton>
}try it online.
Style
The css of wave-button only contains the most basic styles.
.wave-button {
position: relative;
}
.wave-button canvas.motion-wave {
position: absolute;
inset: 0px;
z-index: -10;
}You may need to customize the width and height, background color, and wave fill color through css. You need to modify the css fill property of the canvas.
Here is the additional style added to the example URL
.wave-button {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
outline-color: #000;
}
.wave-button canvas.motion-wave {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
@media (prefers-color-scheme: dark) {
.wave-button canvas.motion-wave {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
fill: #fff;
}
}
.wave-button-inner {
mix-blend-mode: difference;
}