RippleButton

ripplebutton-1779354167677.tsx

'use client';

import React, { useState } from 'react';

interface RippleButtonProps {
  children: React.ReactNode;
  variant: 'primary' | 'secondary' | 'success' | 'danger';
  className?: string;
}

const RippleButton = ({ children, variant, className = '' }: RippleButtonProps) => {
  const [rippleActive, setRippleActive] = useState(false);
  const [rippleX, setRippleX] = useState(0);
  const [rippleY, setRippleY] = useState(0);

  const handleMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
    setRippleActive(true);
    setRippleX(e.clientX - (e.currentTarget as HTMLButtonElement).getBoundingClientRect().left);
    setRippleY(e.clientY - (e.currentTarget as HTMLButtonElement).getBoundingClientRect().top);
  };

  const handleAnimationEnd = () => {
    setRippleActive(false);
  };

  const getVariantClass = () => {
    switch (variant) {
      case 'primary':
        return 'bg-zinc-950 text-gold hover:bg-zinc-850';
      case 'secondary':
        return 'bg-zinc-800 text-zinc-200 hover:bg-zinc-700';
      case 'success':
        return 'bg-green-500 text-zinc-200 hover:bg-green-400';
      case 'danger':
        return 'bg-red-500 text-zinc-200 hover:bg-red-400';
      default:
        return '';
    }
  };

  return (
    <button
      className={`${getVariantClass()} relative inline-flex items-center px-4 py-2 border border-transparent rounded-md transition duration-200 ease-in-out ${className}`}
      onMouseDown={handleMouseDown}
    >
      {children}
      {rippleActive && (
        <span
          className="absolute rounded-full bg-gold opacity-50"
          style={{
            top: `${rippleY}px`,
            left: `${rippleX}px`,
            transform: 'scale(0)',
            transition: 'transform 0.3s, opacity 0.3s',
          }}
          onAnimationEnd={handleAnimationEnd}
        >
          <span
            className="block w-0 h-0 border-4 border-t-gold border-r-transparent border-b-transparent border-l-transparent"
            style={{
              transform: 'scale(1)',
              transition: 'transform 0.3s, opacity 0.3s',
            }}
          />
        </span>
      )}
    </button>
  );
};

export default RippleButton;

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Button with ripple click animation

More from Buttons

'use client';

import React, { useState, useEffect } from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children }) => {
  const [x, setX] = useState(0);
  const [y,

MagneticButton

Buttons

import { motion, useMotionValue, useSpring } from 'framer-motion';
import React from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
  className?: string;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children, cl

MagneticButton

Buttons

'use client';

import { useState } from 'react';

interface GlowButtonProps {
  children: React.ReactNode;
}

const GlowButton: React.FC<GlowButtonProps> = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseE

GlowButton

Buttons

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

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{

LiquidButton

Buttons