Tap Pulse — Tiny Microinteraction for Button Feedback

Tap Pulse is a tiny microinteraction that gives users instant visual feedback when they click or tap a button. It adds a soft pulse effect so interactions feel responsive without being distracting.

This is meant for small UI polish moments: submit buttons, action links, toggles—anywhere you want a little “yes, that worked” feeling without animations getting in the way.

What this microinteraction does

• Adds a subtle pulse animation on click or tap.
• Works on any element with a single CSS class.
• No libraries, no frameworks, no dependencies.

Step 1: Add the CSS

Drop this into your main stylesheet or a <style> block.

/* Tap Pulse microinteraction */
.tap-pulse {
  position: relative;
  overflow: hidden;
}

.tap-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.tap-pulse.is-active::after {
  opacity: 0.12;
  transform: scale(1);
}

Step 2: Add the JavaScript

Place this near the end of your page. It toggles the pulse class briefly on interaction.

<script>
(function () {
  document.addEventListener('click', function (e) {
    var el = e.target.closest('.tap-pulse');
    if (!el) return;

    el.classList.add('is-active');

    // Remove after animation finishes
    setTimeout(function () {
      el.classList.remove('is-active');
    }, 250);
  });
})();
</script>

How to use it

Add the tap-pulse class to any clickable element:

<button class="tap-pulse">Save changes</button>
<a href="#" class="tap-pulse">Load more</a>

Customization ideas

• Stronger effect: increase the opacity value in .tap-pulse.is-active::after.
• Softer effect: lower the scale or opacity.
• Different color: set color on the button to control the pulse tint.

This microinteraction is intentionally subtle. It’s not meant to shout—just to quietly confirm that a user action was received.