PulseButton

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

interface PulseButtonProps {
  children: React.ReactNode;
}

const PulseButton: React.FC<PulseButtonProps> = ({ children }) => {
  return (
    <motion.div
      className='relative'
      whileHover={{ scale: 1.1 }}
    >
      <motion.div
        className='absolute rounded-full bg-[#C9A84C] opacity-50'
        initial={{ scale: 0 }}
        whileHover={{ scale: 1.2, transition: { duration: 0.5 } }}
      />
      <button className='relative z-10 bg-[#0A0A0A] py-2 px-4 text-[#C9A84C] rounded-full'>
        {children}
      </button>
    </motion.div>
  );
};

export default PulseButton;

Component info

Dependencies

About

A premium React component featuring a sonar-like pulsing ring animation around a button when hovered, perfect for adding an extra layer of visual flair to your application. The PulseButton component is built using TypeScript and features a gold-colored ring on a dark background, creating a striking visual effect. With its customizable animation speed and ring color, this component can be easily integrated into any React project. The PulseButton component is ideal for use in applications where a high level of visual engagement is desired, such as in gaming, entertainment, or interactive storytelling. By leveraging the power of React and TypeScript, the PulseButton component provides a seamless and efficient user experience. The component's animations are smooth and responsive, making it perfect for use in a variety of contexts, from buttons and icons to more complex interactive elements. Whether you're building a new application or enhancing an existing one, the PulseButton component is a valuable addition to your toolkit.