NeonBorderButton

import React from 'react';
import { motion } from 'framer-motion';

interface NeonBorderButtonProps {
  children: React.ReactNode;
}

const NeonBorderButton: React.FC<NeonBorderButtonProps> = ({ children }) => {
  return (
    <motion.div
      initial={{ rotate: 0 }}
      animate={{ rotate: 360 }}
      transition={{ duration: 2, repeat: Infinity }}
      className="relative flex justify-center items-center w-40 h-12 bg-transparent border-2 border-dashed border-[#C9A84C] rounded-lg"
    >
      <div className="absolute top-0 left-0 w-full h-full bg-[#0A0A0A] rounded-lg neon-glow"></div>
      <button className="text-[#C9A84C] z-10">{children}</button>
    </motion.div>
  );
};

export default NeonBorderButton;

Component info

Dependencies

About

The NeonBorderButton is a mesmerizing React component that boasts an animated neon border with a dashed gold outline, rotating 360 degrees on a dark background. Perfect for adding a touch of futuristic flair to your application, this button is sure to capture users' attention. With its sleek design and smooth animation, the NeonBorderButton is ideal for use in various contexts, such as calls-to-action, navigation menus, or as a stylish alternative to traditional buttons. The component is built with React 18, TypeScript, and Tailwind CSS, ensuring a seamless and efficient user experience. By incorporating the NeonBorderButton into your project, you can elevate your UI to the next level and provide users with an engaging and interactive experience.