LiquidButton

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

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{
        backgroundColor: '#C9A84C',
      }}
      transition={{ duration: 0.5 }}
      className='py-2 px-4 rounded-lg bg-[#0A0A0A] text-[#F5F5F0]'
    >
      {children}
    </motion.button>
  );
};

export default LiquidButton;

Component info

Dependencies

About

LiquidButton is a premium React component that features a mesmerizing blob morphing background effect. On hover, the background seamlessly transitions from a dark tone to a gold gradient, creating an captivating visual experience. With its dark background and gold accents, this component is perfect for adding a touch of sophistication to any application. The LiquidButton component is built using React 18, TypeScript, and Tailwind CSS, ensuring a robust and maintainable codebase. It is suitable for a wide range of applications, from corporate websites to creative portfolios. The component's dark to gold gradient effect is achieved through a combination of CSS transitions and the Framer Motion library. By leveraging the power of React and modern CSS techniques, the LiquidButton component provides a unique and engaging user experience. With its high-quality code and impressive visuals, this component is sure to elevate any project to the next level.