Plasma Pill
A glassmorphic pill that always carries a slowly rotating conic plasma loop behind it via @property — the kind of motion that feels alive without being noisy.
Plasma Pill the 12th of 22 designs in the 22 CSS Button Group Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="cbgp-plasma-wrap">
<div class="cbgp-plasma" role="group" aria-label="Quick actions">
<button type="button">Like</button>
<button type="button">Save</button>
<button type="button">Share</button>
</div>
</div> @property --cbgp-plasma-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-plasma-wrap {
display: inline-block;
padding: 24px 28px;
background: radial-gradient(ellipse at 30% 30%, #1a0a2a 0%, #050810 100%);
border-radius: 20px;
}
.cbgp-plasma {
position: relative;
display: inline-flex;
padding: 5px;
background: rgba(8,10,18,0.7);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
isolation: isolate;
--cbgp-plasma-a: 0deg;
animation: cbgp-plasma-spin 8s linear infinite;
}
@keyframes cbgp-plasma-spin { to { --cbgp-plasma-a: 360deg; } }
.cbgp-plasma::before {
content: '';
position: absolute; inset: -2px;
border-radius: inherit;
background: conic-gradient(
from var(--cbgp-plasma-a),
#00ffe0, #ff5af1, #ffd479, #00ffe0);
filter: blur(10px);
z-index: -1;
opacity: 0.85;
}
.cbgp-plasma::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: rgba(8,10,18,0.85);
z-index: -1;
}
.cbgp-plasma button {
padding: 9px 22px;
border: 0; cursor: pointer;
background: transparent;
color: rgba(220,225,230,0.85);
font: 700 12px/1 ui-monospace, monospace;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 999px;
transition: background 0.25s, color 0.25s;
}
.cbgp-plasma button + button { border-left: 1px solid rgba(255,255,255,0.06); }
.cbgp-plasma button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cbgp-plasma button:focus-visible { outline: 2px solid rgba(0,255,224,0.7); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
.cbgp-plasma { animation: none; }
}