Coyote Labby Coyote Concept

NewCSS only · inset · keyframes

Sonar

Rings pulse outward from the element like a ping. Good for anything new, live or waiting for a tap.

A free pulse ring animation in HTML and CSS. Also known as ping animation, radar pulse, notification pulse or live indicator ripple.

Class
.CCSonar
Weight
0.7 KB
Needs
CSS only
Best for
Live status, new features, notifications

Tune it

Every snippet on this page follows these settings.

How the Sonar hover effect works

  1. ::before and ::after are both rings in the accent colour, exactly the element's shape.
  2. One keyframe pushes a ring outward by growing its negative inset while it fades.
  3. The second ring starts half a beat later, so the pings overlap.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCSonar">.
  4. That’s it. Sonar is CSS only.

Core components

Sonar on button, toggle, card, dropdown.

More ways to use it

The same class on badge, loader, image card.

The Sonar code

The plain CSS behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS
.CCSonar { position: relative; }
.CCSonar::before,
.CCSonar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid var(--cc-accent);
  opacity: 0;
  pointer-events: none;
}
.CCSonar:is(:hover, :focus-visible, :focus-within)::before,
.CCSonar:is(:hover, :focus-visible, :focus-within)::after { animation: ccSonar calc(1.6s / var(--cc-speed)) cubic-bezier(.2, .6, .3, 1) infinite; }
.CCSonar:is(:hover, :focus-visible, :focus-within)::after { animation-delay: calc(.8s / var(--cc-speed)); }
@keyframes ccSonar { 0% { opacity: .9; inset: -1px; } 100% { opacity: 0; inset: calc(-16px * var(--cc-intensity)); } }
@media (prefers-reduced-motion: reduce) { .CCSonar::before, .CCSonar::after { animation: none !important; } }

Pairs well with

Avoid on the same element Moonrise (::after, ::before), Border Beam (::after), Glare Sweep (::after), Spotlight (::after, ::before), 3D Tilt (::after), Ripple (clipping), Liquid Fill (::before), Ink Pour (::before), Arrow Slide (::before), Grain (::after), Pixel (clipping).

Browser support

Chrome & Edge0+
Safari0+
Firefox0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • Decorative only.
  • Pings on keyboard focus too.
  • Off under reduced motion.

Performance

  • 0.7 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Sonar

What is a pulse ring animation?

Rings pulse outward from the element like a ping. Good for anything new, live or waiting for a tap. Sonar is a free pulse ring animation, also known as ping animation or radar pulse, that works on buttons, toggles, cards, dropdowns and more.

How do you make a pulse ring animation in CSS?

::before and ::after are both rings in the accent colour, exactly the element's shape. One keyframe pushes a ring outward by growing its negative inset while it fades. The second ring starts half a beat later, so the pings overlap.

How do I add Sonar to a button?

Add the class CCSonar next to CCButton, inside an element with the CCTheme class, then include the Sonar CSS. The Copy button on this page gives you all of it in one snippet.

Does Sonar need JavaScript?

No, it's CSS only.

Which browsers support Sonar?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Sonar accessible?

Decorative only. Pings on keyboard focus too. Off under reduced motion.

Can I use Sonar in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCSonar to a button or block.

Is Sonar free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.