https://github.com/zhangyu1818/wave-button
Just button, but it's cool!
https://github.com/zhangyu1818/wave-button
animation button react wave wave-button
Last synced: 3 months ago
JSON representation
Just button, but it's cool!
- Host: GitHub
- URL: https://github.com/zhangyu1818/wave-button
- Owner: zhangyu1818
- License: mit
- Created: 2023-07-06T14:22:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-08T07:20:25.000Z (almost 2 years ago)
- Last Synced: 2025-03-02T13:18:45.911Z (4 months ago)
- Topics: animation, button, react, wave, wave-button
- Language: TypeScript
- Homepage: https://zhangyu1818.github.io/wave-button/
- Size: 311 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wave Button
Just button, but it's cool!
[preview](https://zhangyu1818.github.io/wave-button/)
## Installation
```shell
npm i wave-button
```
## Usage
```tsx
import { WaveButton } from 'wave-button'
import 'wave-button/dist/style.css'
function App() {
return Button
}
```
try it [online](https://codesandbox.io/s/youthful-goldberg-f3n8lf).
## Style
The css of wave-button only contains the most basic styles.
```css
.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
```css
.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;
}
```