Back to CSS Floating Buttons Pulse Ring Pure CSS
Share
.cfb-pulse {
  position: relative;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #ff6c8a, #f5a623);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255,108,138,0.4);
}
.cfb-pulse::before, .cfb-pulse::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,108,138,0.55);
  animation: cfb-pulse-ring 1.8s ease-out infinite;
}
.cfb-pulse::after { animation-delay: 0.9s; }
@keyframes cfb-pulse-ring {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.7);  opacity: 0; }
}
.cfb-pulse:hover { filter: brightness(1.08); }
.cfb-pulse:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.cfb-pulse svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
<button type="button" class="cfb-pulse" aria-label="What's new">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2v6m0 0a4 4 0 0 0-4 4v3.5L6 17h12l-2-1.5V12a4 4 0 0 0-4-4z" />
    <path d="M9 17a3 3 0 0 0 6 0" />
  </svg>
</button>
Live preview Edit any tab — preview updates live Ready