ShimmerButton

import React from 'react';
import './ShimmerButton.css';

interface ShimmerButtonProps {
  children: React.ReactNode;
}

const ShimmerButton: React.FC<ShimmerButtonProps> = ({ children }) => {
  return (
    <button className="relative inline-flex items-center justify-center p-0.5 mb-2 overflow-hidden text-sm font-medium rounded-lg group bg-[#0A0A0A] hover:bg-[#0A0A0A]">
      <span className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#C9A84C] via-[#C9A84C] opacity-0 group-hover:opacity-100 transition duration-300 ease-linear"></span>
      <span className="relative px-5 py-2.5 transition-all ease-linear duration-75 bg-[#0A0A0A] group-hover:bg-[#F5F5F0] rounded-md">
        {children}
      </span>
    </button>
  );
};

export default ShimmerButton;

Component info

Dependencies

About

A premium React component that features a diagonal shimmer light sweep across the button face on hover. The gold shimmer effect adds a touch of sophistication and elegance to any application. Built with TypeScript and using the latest React 18 features, this component is perfect for adding a professional look to your UI. With its dark background and gold shimmer, this button is sure to stand out. The component uses Tailwind CSS for styling and is fully customizable. It's perfect for use in a variety of applications, from dashboards to landing pages.