Create a Moving Shimmer Border Button with Tailwind and React

Create a shimmer effect for a button with a moving shimmer line along the border. The shimmer should move along the button's border in a smooth, continuous motion. The size of the shimmer line should be 0.05em, and the shimmer color should be customizable. The effect should look like a glowing line sweeping across the edges of the button. Make sure the button has no solid border but instead uses this moving shimmer effect around the edges. The button should have a transparent background with rounded corners. The shimmer should move from left to right or in a circular motion around the border, depending on the button's state (hovered or focused) of this code - import React, { CSSProperties } from "react"; import { cn } from "@/app/lib/utils"; import Link from "next/link"; export interface ShimmerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { shimmerColor?: string; shimmerSize?: string; borderRadius?: string; shimmerDuration?: string; background?: string; className?: string; children?: React.ReactNode; } const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>( ( { shimmerColor = "#9333ea", shimmerSize = "0.05em", shimmerDuration = "3s", borderRadius = "100px", background = "#0f0c29cc", className, children, ...props }, ref, ) => { return ( <button style={ { "--spread": "90deg", "--shimmer-color": shimmerColor, "--radius": borderRadius, "--speed": shimmerDuration, "--cut": shimmerSize, "--bg": background, } as CSSProperties } className={cn( "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-transparent px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black", "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px", className, )} ref={ref} {...props} > {/* Spark container */} <div className={cn( "-z-30 blur-[2px]", "absolute inset-0 overflow-visible [container-type:size]", )} > {/* Spark */} <div className="absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]"> {/* Spark before */} <div className="animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" /> </div> </div> {children} {/* Highlight */} <div className={cn( "insert-0 absolute size-full", "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]", "transform-gpu transition-all duration-300 ease-in-out", "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]", "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]", )} /> <Link href='#' className="text-purple-600 text-sm">Resume</Link> {/* Backdrop */} <div className={cn( "absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]", )} /> </button> ); }, ); export default ShimmerButton;