wave-effect

click wave effect with CSS animation.

Usage no npm install needed!

<script type="module">
  import waveEffect from 'https://cdn.skypack.dev/wave-effect';
</script>

README

wave-effect

click wave effect with CSS animation.

Install

npm install wave-effect

yarn add wave-effect

Usage

import wave,{ clearEffect } from 'wave-effect'
import 'wave-effect/dist/wave.css'

const button = document.getElementById("button")

wave(button)

// clear effect
clearEffect(button)

API

wave(element: Element, options?: WaveOptions)

WaveOptions

interface WaveOptions {
  // current wave effect color
  waveColor?: string 
  // if element includes these className, click doesn't trigger effect
  disabledClass?: string[] 
}

Customize Style

you can override less variables to customize style.

@import "~wave-effect/src/wave.less";

@wave-color: red;
@wave-animation-width: 20px;

or use css variables.

:root {
  --wave-shadow-color: red;
  --wave-animation-width: 20px;
}

Licence

MIT