Buttons

"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";

const BorderShiningButton = () => {
  return (
    <div className={cn("flex items-center justify-center")}>
      <div
        className={cn(
          "absolute flex items-center justify-center overflow-hidden rounded-md p-px",
          "bg-white dark:bg-black",
        )}
      >
        <motion.div
          className={cn("absolute inset-[-50%] rounded-md")}
          style={{
            background:
              "conic-gradient(from 0deg,transparent 235deg,#1FB74D 235deg,transparent 360deg)",
          }}
          animate={{ rotate: 360 }}
          transition={{
            duration: 4,
            repeat: Infinity,
            ease: "linear",
          }}
        ></motion.div>
        <button
          className={cn(
            "relative flex items-center justify-center rounded-md border px-4 py-2",
            "border-zinc-200 dark:border-zinc-800",
            "bg-white dark:bg-black",
          )}
        >
          Borders are cool
        </button>
      </div>
    </div>
  );
};

export default BorderShiningButton;

import { cn } from "@/lib/utils";
import React from "react";

const ShimerButton = () => {
  return (
    <div className={cn("flex items-center justify-center")}>
      <button
        className={cn(
          "h-[50px] w-[200px] cursor-pointer rounded-md px-4 py-2",
          "bg-neutral-200 text-black dark:bg-zinc-900 dark:text-white",
          "after:transition-all after:duration-900",
          "after:content[''] relative overflow-hidden after:absolute after:-top-10 after:-left-50 after:h-[200px] after:w-1/2 after:rotate-10 after:bg-neutral-400 hover:after:translate-x-[500%] dark:after:bg-white/10",
        )}
      >
        Hover me
      </button>
    </div>
  );
};

export default ShimerButton;