<fieldset class="crb-glow">
  <legend class="crb-sr">Reaction</legend>
  <label><input type="radio" name="crb-glow" /><span></span>Like</label>
  <label><input type="radio" name="crb-glow" /><span></span>Love</label>
  <label><input type="radio" name="crb-glow" /><span></span>Celebrate</label>
</fieldset>

.crb-glow { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-glow label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-glow input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-glow span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative;
  transition: border-color 0.2s, background 0.25s;
}
.crb-glow span::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,108,138,0.7);
  pointer-events: none;
}
.crb-glow input:checked + span {
  background: linear-gradient(135deg, #ff6c8a, #a78bfa);
  border-color: transparent;
}
.crb-glow input:checked + span::after {
  animation: crb-glow-ripple 0.9s ease-out;
}
@keyframes crb-glow-ripple {
  0%   { box-shadow: 0 0 0 0   rgba(255,108,138,0.7), 0 0 0 0  rgba(167,139,250,0.5); }
  60%  { box-shadow: 0 0 0 14px rgba(255,108,138,0),   0 0 0 22px rgba(167,139,250,0); }
  100% { box-shadow: 0 0 0 14px rgba(255,108,138,0),   0 0 0 22px rgba(167,139,250,0); }
}

@media (prefers-reduced-motion: reduce) {
  .crb-glow,
  .crb-glow * {
    animation: none !important;
  }
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}