mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
d8b83ccdb8
Pure CSS approach: @property --border-angle + conic-gradient on border-box. No extra elements, no overflow issues, no JS animation. Smooth rotation via CSS Houdini custom property animation.
31 lines
697 B
TypeScript
31 lines
697 B
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function HoverBorderGradient({
|
|
children,
|
|
containerClassName,
|
|
className,
|
|
as: Tag = 'button',
|
|
...props
|
|
}: React.PropsWithChildren<
|
|
{
|
|
as?: React.ElementType;
|
|
containerClassName?: string;
|
|
className?: string;
|
|
} & React.HTMLAttributes<HTMLElement>
|
|
>) {
|
|
return (
|
|
<Tag
|
|
className={cn(
|
|
'hover-border-gradient group flex items-center justify-center rounded-xl text-sm font-medium text-white',
|
|
containerClassName,
|
|
)}
|
|
{...props}
|
|
>
|
|
<span className={cn('relative z-10 flex items-center justify-center', className)}>
|
|
{children}
|
|
</span>
|
|
</Tag>
|
|
);
|
|
}
|