Play Button Pulse Hover
A round play button with a soft halo at rest that sends out two staggered ripples while hovered, like a sonar ping. The ripples are two spans on the ping keyframes Tailwind uses.
Also known as: video play button hover css, pulsing play icon, ripple play button.
HTML
<button class="hfx-play-button-pulse" aria-label="Play video"> <span class="hfx-play-button-pulse-ring"></span> <span class="hfx-play-button-pulse-ring"></span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6.5v11a1 1 0 0 0 1.5.9l8.4-5.5a1 1 0 0 0 0-1.8L10.5 5.6A1 1 0 0 0 9 6.5Z" fill="currentColor"/></svg> </button>
CSS
.hfx-play-button-pulse {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 3.5em;
height: 3.5em;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
width: 3.75em;
height: 3.75em;
background: var(--c);
color: #fff;
box-shadow: 0 0 0 0.4em color-mix(in srgb, var(--c) 18%, transparent);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;}
.hfx-play-button-pulse svg {
position: relative;
width: 1.6em;
height: 1.6em;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* the same color as the button, so a ring is invisible until it grows past the edge */
.hfx-play-button-pulse-ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 60%, transparent);
pointer-events: none;
}
.hfx-play-button-pulse:is(:hover, :focus-visible) {
transform: scale(1.06);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 18%, transparent);
}
.hfx-play-button-pulse:is(:hover, :focus-visible) svg { transform: scale(1.12); }
.hfx-play-button-pulse:is(:hover, :focus-visible) .hfx-play-button-pulse-ring {
animation: hfx-play-button-pulse-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.hfx-play-button-pulse:is(:hover, :focus-visible) .hfx-play-button-pulse-ring:nth-child(2) { animation-delay: 0.5s; }
@keyframes hfx-play-button-pulse-ping {
75%, 100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hfx-play-button-pulse, .hfx-play-button-pulse *, .hfx-play-button-pulse::before, .hfx-play-button-pulse::after, .hfx-play-button-pulse *::before, .hfx-play-button-pulse *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<button aria-label="Play video" class="group relative grid h-14 w-14 place-items-center rounded-full bg-blue-500 text-white ring-[6px] ring-blue-500/20 transition duration-300 hover:scale-105 hover:ring-0"> <span class="pointer-events-none absolute inset-0 rounded-full bg-blue-500/60 group-hover:animate-ping"></span> <span class="pointer-events-none absolute inset-0 rounded-full bg-blue-500/60 group-hover:animate-ping group-hover:[animation-delay:0.5s]"></span> <svg class="relative h-6 w-6 transition-transform duration-300 group-hover:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6.5v11a1 1 0 0 0 1.5.9l8.4-5.5a1 1 0 0 0 0-1.8L10.5 5.6A1 1 0 0 0 9 6.5Z" fill="currentColor"/></svg> </button>
Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.