How To Create a Button With a Ripple Effect In React

We will create a unique button component in React with a beautiful ripple effect in this tutorial. The button will respond to user clicks with an animated ripple effect in addition to having a visually pleasing gradient background.

The React Component

Let’s start by examining the React component code:

import React, { useRef } from 'react';
import './mycustombutton.css';

function MyCustomButton({ name }) {
  const buttonRef = useRef(null);
  const rippleRef = useRef(null);

  function handleClick(event) {
    const button = buttonRef.current;
    const ripple = rippleRef.current;
    const buttonRect = button.getBoundingClientRect();
    const { left, top } = buttonRect;
    const leftPosition = event.clientX - left;
    const topPosition = event.clientY - top;

    ripple.style.left = leftPosition + 'px';
    ripple.style.top = topPosition + 'px';

    ripple.classList.add('active');

    setTimeout(() => {
      ripple.classList.remove('active');
    }, 600);
  }

  return (
    <div ref={buttonRef} onClick={handleClick} className="myButton">
      {name}
      <span ref={rippleRef} className="rippleEffect"></span>
    </div>
  );
}

export default MyCustomButton;

In this component, we use the useRef hook to create references to the button and the ripple span elements. The handleClick function calculates the position of the click relative to the button, positions the ripple accordingly, adds the ‘active’ class to initiate the ripple effect, and removes the class after a short delay.

The CSS Styles

Now let’s take a look at the accompanying CSS file (mycustombutton.css):

.myButton {
  background: linear-gradient(90deg, #7200ed, rgb(188, 116, 254));
  width: 170px;
  text-align: center;
  padding: 16px;
  border-radius: 16px;
  color: white;
  font-size: 20px;
  box-shadow: 0px 3px 9px rgb(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.rippleEffect {
  width: 60px;
  height: 60px;
  background-color: white;
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
}

.rippleEffect.active {
  animation: rippleEffect 0.9s ease infinite;
}

@keyframes rippleEffect {
  0% {
    opacity: 0.5;
    transform: scale(0);
  }

  100% {
    opacity: 0;
    transform: scale(20);
  }
}

The styles for the ripple effect and the unique button are specified in this CSS file. The button features rounded corners, a soft box shadow, and a gradient backdrop. With the @keyframes rule and CSS animations, the ripple effect is produced.

Execution

Import and include the MyCustomButton component in your React application to utilize this custom button. As an illustration:

import React from 'react';
import MyCustomButton from './MyCustomButton';

function App() {
  return (
    <div>
      <MyCustomButton name="Click Me" />
    </div>
  );
}

export default App;

The custom button is rendered in this example with the label “Click Me.” You are welcome to alter the label, color scheme, and other elements to fit the style of your project.

In Summary

With the help of React and CSS, you have now produced a unique button component with a lovely ripple effect. With its interactive and eye-catching button, this component can improve the user experience in your applications. Try a variety of styles and animations to see what works best for the design of your project.