Go Live Button
A streaming button with a blinking red dot and two signal arcs on each side that light up in turn, like a broadcast icon on air. The arcs are two bordered circles with only their sides colored.
Also known as: live button css, live stream button, broadcast button animation.
HTML
<button class="btn-go-live" type="button"> <span class="btn-go-live-signal" aria-hidden="true"><i></i></span> Go live </button>
CSS
.btn-go-live {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
gap: 0.55em;
padding: 0.75em 1.5em 0.75em 1.05em;
border-radius: 0.7em;
background: color-mix(in srgb, var(--c) 18%, #0b0d13);
color: #fff;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
transition: box-shadow 0.25s ease, transform 0.15s ease;}
.btn-go-live-signal {
--red: color-mix(in srgb, var(--c) 12%, #ff3b47);
position: relative;
display: grid;
place-items: center;
width: 1.9em;
height: 1.3em;
color: color-mix(in srgb, var(--c) 55%, #fff);
}
.btn-go-live-signal i {
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: var(--red);
box-shadow: 0 0 0.45em var(--red);
animation: btn-go-live-dot 1.6s ease-in-out infinite;
}
.btn-go-live-signal::before,
.btn-go-live-signal::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.15em;
height: 1.15em;
margin: -0.575em;
border: 2px solid transparent;
border-right-color: currentColor;
border-left-color: currentColor;
border-radius: 50%;
opacity: 0.15;
animation: btn-go-live-wave 1.6s ease-out infinite;
}
.btn-go-live-signal::after {
width: 1.9em;
height: 1.9em;
margin: -0.95em;
animation-delay: 0.2s;
}
.btn-go-live:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--c), 0 0.4em 1.2em -0.4em color-mix(in srgb, var(--c) 80%, transparent); }
.btn-go-live:active { transform: scale(0.96); }
@keyframes btn-go-live-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@keyframes btn-go-live-wave {
0%, 100% { opacity: 0.15; }
25% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.btn-go-live, .btn-go-live *, .btn-go-live::before, .btn-go-live::after, .btn-go-live *::before, .btn-go-live *::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 class="inline-flex items-center gap-2 rounded-xl bg-slate-900 py-3 pl-4 pr-6 font-semibold text-white ring-1 ring-inset ring-blue-500/40 transition active:scale-95">
<span class="relative grid h-5 w-7 place-items-center text-blue-300">
<span class="absolute h-4 w-4 animate-pulse rounded-full border-2 border-x-current border-y-transparent"></span>
<span class="absolute h-7 w-7 animate-pulse rounded-full border-2 border-x-current border-y-transparent [animation-delay:200ms]"></span>
<span class="h-2 w-2 animate-pulse rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]"></span>
</span>
Go live
</button>Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - 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.