Back

Crafting an Eye-Catching Glowing Button with Ripple Effect

A step-by-step guide to building a visually impressive button with a halo glow and ripple feedback to captivate your users.

HTML

Building a glowing button starts with creating a simple button element in HTML. This button will serve as the interactive element that users can click on.

        <button class="glow-button" onclick="createRipple(event)">Click Me!</button>

CSS

The glow effect is achieved through CSS. We’ll start by styling the button itself, setting the padding, font size, and background color. A key element is the box-shadow property, which gives the button its glowing effect.

        .glow-button {
          position: relative;
          padding: 10px 20px;
          font-size: 16px;
          color: #ffffff;
          background-color: #03a9f4;
          border: none;
          border-radius: 25px;
          cursor: pointer;
          box-shadow: 0 0 10px 0 #03a9f4;
          overflow: hidden;
          transition: box-shadow 0.3s, transform 0.3s;
        }

        .glow-button:hover {
          box-shadow: 0 0 20px 0px #03a9f4;
          transform: scale(1.05);
        }

        .glow-button:active {
          transform: scale(0.95);
        }

For the ripple effect, a span element is dynamically added when the button is clicked. This ripple element is styled to start small and expand over time.

        .glow-button .ripple {
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.7);
          transform: scale(0);
          animation: ripple 0.6s linear;
        }

        @keyframes ripple {
          to {
            transform: scale(4);
            opacity: 0;
          }
        }

JavaScript

The JavaScript part is fairly simple but powerful. This code handles the ripple effect by creating a span element on each click, determining its position based on where you click the button, and animating it for visual feedback.

        function createRipple(event) {
          const button = event.currentTarget;
          const circle = document.createElement("span");
          const diameter = Math.max(button.clientWidth, button.clientHeight);
          const radius = diameter / 2;

          circle.style.width = circle.style.height = `${diameter}px`;
          circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
          circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
          circle.classList.add("ripple");

          const ripple = button.getElementsByClassName("ripple")[0];

          if (ripple) {
            ripple.remove();
          }

          button.appendChild(circle);
        }

Advanced Customizations

Advanced users can extend this glow button with various customizations to suit their project's needs. Consider the following enhancements:

Theming: Change the background-color and box-shadow color to reflect different themes or branding guidelines.
Accessibility: Add aria-label to the button for better screen reader support.
Mobile Support: Ensure the button is responsive by using relative units like em or rem for padding and font size.
Animations: Explore using CSS animations for other interactive states, like changing colors or morphing shapes on hover or focus.

This glowing button with ripple effect is not just visually appealing but also highly modifiable, inviting developers to explore and innovate further.

Whole code

<button class="glow-button" onclick="createRipple(event)">Click Me!</button>

<script>
function createRipple(event) {
  const button = event.currentTarget;
  const circle = document.createElement("span");
  const diameter = Math.max(button.clientWidth, button.clientHeight);
  const radius = diameter / 2;

  circle.style.width = circle.style.height = `${diameter}px`;
  circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
  circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
  circle.classList.add("ripple");

  const ripple = button.getElementsByClassName("ripple")[0];

  if (ripple) {
    ripple.remove();
  }

  button.appendChild(circle);
}
</script>

<style>
.glow-button {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  color: #ffffff;
  background-color: #03a9f4;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 0 10px 0 #03a9f4;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}

.glow-button:hover {
  box-shadow: 0 0 20px 0px #03a9f4;
  transform: scale(1.05);
}

.glow-button:active {
  transform: scale(0.95);
}

.glow-button .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transform: scale(0);
  animation: ripple 0.6s linear;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
</style>

Crafting an Eye-Catching Glowing Button with Ripple Effect

HTML

CSS

JavaScript

Advanced Customizations

Whole code

Comments

More buttons

Similar

See also