# Hook Pulse Effect (2)

**Published by:** [James Quinn](https://paragraph.com/@james-quinn/)
**Published on:** 2023-11-02
**URL:** https://paragraph.com/@james-quinn/hook-pulse-effect-2

## Content

This is second part for the pulse EffectButton 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; } } Usageimport { 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

## Publication Information

- [James Quinn](https://paragraph.com/@james-quinn/): Publication homepage
- [All Posts](https://paragraph.com/@james-quinn/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@james-quinn): Subscribe to updates