Sweep Button
A button with a glowing sweep animation that slides across on hover, featuring customizable sweep and background colors for a sharp, modern look.
Installation
npx shadcn@latest add https://fluxbuttons.vercel.app/r/sweep-button.json"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
export interface SweepButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
sweepColor?: string
backgroundColor?: string
}
const SweepButton = React.forwardRef<HTMLButtonElement, SweepButtonProps>(
({ className, children, sweepColor = "#22d3ee", backgroundColor = "#083344", ...props }, ref) => {
return (
<button
ref={ref}
className={cn(
`border border-b-4 text-white cursor-pointer font-medium overflow-hidden relative px-4 py-2 rounded-md hover:brightness-150 hover:border-t-4 hover:border-b active:opacity-75 outline-none duration-300 group`,
className
)}
style={{
backgroundColor: backgroundColor,
borderColor: sweepColor,
}}
{...props}
>
<span
className="absolute -top-[150%] left-0 inline-flex w-80 h-[5px] rounded-md opacity-50 group-hover:top-[150%] duration-500"
style={{
backgroundColor: sweepColor,
boxShadow: `0 0 10px 10px ${sweepColor}33`,
}}
></span>
{children || "Hover Me"}
</button>
)
}
)
SweepButton.displayName = "SweepButton"
export default SweepButtonUsage
import BrokenButton from "@/components/ui/sweep-button";
const SweepButtonPreview=()=>{
return(
<SweepButton >Hover Me</SweepButton>
)
}
export default SweepButtonPreviewExamples
Sweep Color
import SweepButton from "@/components/ui/sweep-button";
const SweepButtonPreviewSweepColor = () => {
//The border inherits sweepColor value by default, but can be customized using className.
return <SweepButton sweepColor="#a1f78dff">Sweep Button</SweepButton>;
};
export default SweepButtonPreviewSweepColor;Background Color
import SweepButton from "@/components/ui/sweep-button";
const SweepButtonPreviewSweepColor = () => {
return <SweepButton backgroundColor="#4e2d0eff">Sweep Button</SweepButton>;
};
export default SweepButtonPreviewSweepColor;API Reference
Sweep Button
The Sweep Button component is a wrapper around the button element that adds a variety of styles and functionality.
Prop
Type