<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; }
}