# Hook Pulse Effect (2)

By [James Quinn](https://paragraph.com/@james-quinn) · 2023-11-02

---

**This is second part for the pulse Effect**

*   **Button CSS**
    

    /* Pulse Effect */
    .pulse__effect {
      animation: pulse-effect 1s ease-out;
    }
    
    @keyframes pulse-effect {
      0% {
        opacity: 0.2;
        height: 0px;
        width: 0px;
      }
      100% {
        opacity: 0;
        height: 400px;
        width: 400px;
      }
    }
    

*   **Usage**
    
        import { FC, LegacyRef, ReactNode, useRef } from "react"
        import usePulseEffect from "./usePulseEffect"
        
        interface ButtonProps {
          id: string
          refP?: Element
          children?: ReactNode
          className?: string
          type?: "button" | "submit" | "reset" | undefined
          pulseColor?: string
          onClick?: (e: any) => void
          disabled?: boolean
        }
        
        const Button: FC<ButtonProps> = ({
          id,
          refP,
          children,
          pulseColor,
          className,
          onClick,
          ...rest
        }) => {
          const elementRef = useRef()
          const ref = useRef()
          const pulseRef = useRef()
        
          usePulseEffect({
            ref,
            pulseRef,
            pulseColor,
          })
        
          return (
            <button
              ref={ref}
              id={id}
              type="button"
              className={`transition duration-[300ms] 
                  rounded-[30px] text-[white]
                  relative
                  overflow-hidden
                  ${className || ""}`}
              onClick={onClick}
              {...rest}
            >
              <div
                className={`absolute
                z-[0] left-[-5px] top-[-5px]
                rounded-[50%]
                translate-x-[-50%]
                translate-y-[-50%]
                w-[0px] h-[0px]`}
                ref={pulseRef}
              />
              <div
                ref={(refP as unknown as LegacyRef<HTMLDivElement>) || elementRef}
                className="
              z-[3] w-full
              flex items-center justify-center
              gap-[10px]"
              >
                {children}
              </div>
            </button>
          )
        }
        
        export default Button

---

*Originally published on [James Quinn](https://paragraph.com/@james-quinn/hook-pulse-effect-2)*