cyber-button

1"use client";
2 
3import React from "react";
4import { motion } from "framer-motion";
5import { cn } from "@/lib/utils";
6 
7const CyberButton = ({
8  className,
9  children,
10  ...props
11}: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
12  return (
13    <button
14      className={cn(
15        "group relative px-6 py-2 font-mono text-sm font-bold uppercase tracking-wider text-cyan-400 transition-all duration-300",
16        "hover:text-cyan-200 active:scale-95",
17        className,
18      )}
19      {...props}
20    >
21      <span className="relative z-10">{children || "Initialize"}</span>
22 
23      <div className="absolute inset-0 border border-cyan-500/50 transition-colors group-hover:border-cyan-400" />
24 
25      <div className="absolute -left-1 -top-1 size-2 border-l-2 border-t-2 border-cyan-500 transition-transform group-hover:-translate-x-0.5 group-hover:-translate-y-0.5" />
26      <div className="absolute -right-1 -bottom-1 size-2 border-r-2 border-b-2 border-cyan-500 transition-transform group-hover:translate-x-0.5 group-hover:translate-y-0.5" />
27 
28      <div className="absolute inset-0 bg-cyan-500/0 opacity-0 transition-all duration-300 group-hover:bg-cyan-500/10 group-hover:opacity-100 group-hover:shadow-[0_0_20px_rgba(6,182,212,0.3)]" />
29 
30      <div className="absolute left-2 top-0 h-px w-4 bg-cyan-500/50 group-hover:w-8 group-hover:bg-cyan-400 transition-all" />
31      <div className="absolute right-2 bottom-0 h-px w-4 bg-cyan-500/50 group-hover:w-8 group-hover:bg-cyan-400 transition-all" />
32 
33      <motion.div
34        className="absolute inset-x-0 h-[2px] bg-cyan-400/30 opacity-0 group-hover:opacity-100 blur-[1px] z-20 pointer-events-none"
35        animate={{
36          top: ["0%", "100%", "0%"],
37        }}
38        transition={{
39          duration: 3,
40          repeat: Infinity,
41          ease: "linear",
42        }}
43      />
44    </button>
45  );
46};
47 
48export default CyberButton;