jimlee/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-10-27 13:39:03 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Thomas Camlong
2025-04-17 15:42:07 +02:00
parent 16d6e34c3f
commit ad849b8deb
5 changed files with 114 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/magicui/interactive-hover-button.tsx
View File

@@ -1,13 +1,14 @@
import { cn } from "@/lib/utils"
import { ArrowRight } from "lucide-react"
import React from "react"
import { Button } from "../ui/button"
interface InteractiveHoverButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
export const InteractiveHoverButton = React.forwardRef<HTMLButtonElement, InteractiveHoverButtonProps>(
({ children, className, ...props }, ref) => {
return (
<button
<Button
ref={ref}
className={cn(
"group relative w-auto cursor-pointer overflow-hidden rounded-full border bg-background p-2 px-6 text-center font-semibold",
@@ -19,11 +20,11 @@ export const InteractiveHoverButton = React.forwardRef<HTMLButtonElement, Intera
<div className="h-2 w-2 rounded-full bg-primary transition-all duration-300 group-hover:scale-[100.8]" />
<span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">{children}</span>
</div>
<div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
<div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-1 group-hover:opacity-100">
<span>{children}</span>
<ArrowRight />
</div>
</button>
</Button>
)
},
)