Wave Button
A dynamic button that creates layered wave ripples on hover, using customizable color bands for a smooth, fluid visual effect.
Installation
npx shadcn@latest add https://fluxbuttons.vercel.app/r/wave-button.json"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
export interface WaveButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
waveColors?: [string, string, string, string, string]
}
const WaveButton = React.forwardRef<HTMLButtonElement, WaveButtonProps>(
({
className,
children,
waveColors = ["#0c4a6e", "#075985", "#0369a1", "#0284c7", "#0ea5e9"],
...props
}, ref) => {
const waveSizes = [48, 40, 32, 24, 16]
const delays = [75, 100, 150, 200, 300]
const backgroundColor = waveColors[1]
const borderColor = waveColors[3]
return (
<button
ref={ref}
className={cn(
"relative border text-white duration-500 group cursor-pointer overflow-hidden h-12 min-w-50 rounded-md p-2 flex justify-center items-center font-semibold",
className
)}
style={{
backgroundColor: backgroundColor,
borderColor: borderColor,
}}
{...props}
>
{waveColors.map((color, index) => (
<div
key={index}
className="absolute z-10 rounded-full group-hover:scale-150 transition-all duration-500 ease-in-out delay-150"
style={{
width: `${waveSizes[index] / 4}rem`,
height: `${waveSizes[index] / 4}rem`,
backgroundColor: color,
transitionDelay: `${delays[index]}ms`,
}}
></div>
))}
<p className="z-10">{children}</p>
</button>
)
}
)
WaveButton.displayName = "WaveButton"
export default WaveButtonUsage
import WaveButton from "@/components/ui/wave-button"
const WaveButtonPreview = () => {
return (
<div>
<WaveButton>Hover Me</WaveButton>
</div>
)
}
export default WaveButtonPreviewExamples
Wave Colors
import WaveButton from "@/components/ui/wave-button";
const WaveButtonPreviewWaveColors = () => {
return (
<div>
<WaveButton
waveColors={["#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444"]}
>
Wave Button
</WaveButton>
</div>
);
};
export default WaveButtonPreviewWaveColors;API Reference
Wave Button
The Wave Button component is a wrapper around the button element that adds a variety of styles and functionality.
Prop
Type