Introduction

In this tutorial, you'll learn to create a button that visually mimics the captivating effect of a ripple on water—fluid, dynamic, and engaging. This button employs a combination of CSS animations and event handling for a tactile, modern user interface experience.

HTML

We'll start by setting up our basic HTML structure. A button will serve as our interactive element, nestled within a container to keep it centered on the page.

<div class="ripple-button-container">
  <button class="polymorphic-button" aria-label="Wave-inspired interactive button">
    Press Me
  </button>
</div>
      

Notice the aria-label providing accessibility for screen readers by explaining the button's unique purpose. Always use semantic HTML and ensure accessibility to comply with best practices.

CSS

The heart of our ripple effect lies in the CSS. We'll use the pseudo-element ::after to create the ripple, expanding outward from the clicked point.

body {
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f3f4f6;
  overflow: hidden;
}
.ripple-button-container {
  position: relative;
  display: inline-block;
}
.polymorphic-button {
  background-color: #1e3a8a;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 15px 30px;
  font-size: 20px;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
.polymorphic-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}
.polymorphic-button.rippled::after {
  width: 300px;
  height: 300px;
}
.polymorphic-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.5);
}
      

Our CSS also features a :focus-visible style for accessibility, providing a clear visual indication when the button is focused using keyboard navigation.

JavaScript

JavaScript is used here to manage the button's active state, triggering our ripple effect upon click.

document.querySelector('.polymorphic-button').addEventListener('click', function() {
  const button = this;
  button.classList.toggle('rippled');
  setTimeout(() => button.classList.remove('rippled'), 600);
});
      

We add a click event listener to the button that toggles the 'rippled' class, cueing our CSS animation. A setTimeout ensures the ripple effect completes its cycle before removing the active class.

Conclusion

This tutorial has taught you how to create a vivid ripple effect button using a combination of HTML, CSS, and JavaScript. Remember to prioritize accessibility and semantic HTML in your web projects, and consider the tactile feedback in user interaction design. Keep exploring different CSS animation techniques and other modern design trends like glassmorphism or tactile motion to make your UI components even more dynamic and engaging. This polymorphic ripple button is just a glimpse of the potential creativity that lies ahead in UI/UX design.