Plasma Combo
A dropdown trigger with a neon plasma border that pulses subtly. The list reveals via a clip-path slide; selection plays a scanline flash on the chosen option.
Plasma Combo the 18th of 22 designs in the 22 CSS Button Group Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). 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-combo" role="group" aria-label="Sort options">
<button
type="button"
class="cbgp-combo-trigger"
aria-haspopup="listbox"
aria-expanded="false"
data-cbgp-combo
>
<span>Sort: Newest</span>
<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
</button>
<ul class="cbgp-combo-list" role="listbox" hidden>
<li role="option" aria-selected="true">Newest</li>
<li role="option">Oldest</li>
<li role="option">A → Z</li>
<li role="option">Z → A</li>
<li role="option">Most popular</li>
</ul>
</div> .cbgp-combo {
position: relative;
display: inline-block;
}
.cbgp-combo-trigger {
display: inline-flex; align-items: center; gap: 12px;
padding: 11px 16px;
background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
border: 1px solid #00ffe0;
border-radius: 10px;
color: #c8fffa;
font: 600 12px/1 ui-monospace, monospace;
letter-spacing: 0.08em;
cursor: pointer;
position: relative;
box-shadow: 0 0 12px rgba(0,255,224,0.15), inset 0 0 0 1px rgba(0,255,224,0.1);
transition: box-shadow 0.25s, color 0.2s;
}
.cbgp-combo-trigger:hover {
box-shadow: 0 0 22px rgba(0,255,224,0.35), inset 0 0 0 1px rgba(0,255,224,0.2);
color: #fff;
}
.cbgp-combo-trigger:focus-visible { outline: 2px solid #ff5af1; outline-offset: 3px; }
.cbgp-combo-trigger svg { width: 11px; height: 11px; fill: none; stroke: #00ffe0; stroke-width: 2; transition: transform 0.3s cubic-bezier(.65,0,.35,1); }
.cbgp-combo-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.cbgp-combo-list {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
margin: 0; padding: 4px;
list-style: none;
background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
border: 1px solid rgba(0,255,224,0.4);
border-radius: 10px;
z-index: 10;
box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,224,0.1);
animation: cbgp-combo-in 0.28s cubic-bezier(.65,0,.35,1);
}
@keyframes cbgp-combo-in {
from { clip-path: inset(0 0 100% 0 round 10px); opacity: 0; }
to { clip-path: inset(0 0 0 0 round 10px); opacity: 1; }
}
.cbgp-combo-list li {
padding: 8px 14px;
font: 600 12px/1 ui-monospace, monospace;
color: rgba(200,255,250,0.7);
cursor: pointer;
border-radius: 6px;
letter-spacing: 0.06em;
transition: background 0.15s, color 0.15s;
}
.cbgp-combo-list li[aria-selected="true"] {
color: #00ffe0;
background: rgba(0,255,224,0.08);
}
.cbgp-combo-list li:hover { background: rgba(0,255,224,0.15); color: #fff; } /* Plasma combobox dropdown — toggle aria-expanded; click outside or Escape to close. */
document.querySelectorAll('[data-cbgp-combo]').forEach(function (trigger) {
var list = trigger.parentElement.querySelector('.cbgp-combo-list');
var label = trigger.querySelector('span');
if (!list) return;
function open() { list.hidden = false; trigger.setAttribute('aria-expanded', 'true'); }
function close() { list.hidden = true; trigger.setAttribute('aria-expanded', 'false'); }
trigger.addEventListener('click', function (e) {
e.stopPropagation();
list.hidden ? open() : close();
});
trigger.addEventListener('keydown', function (e) {
if (e.key === 'Escape') { close(); trigger.focus(); }
});
list.addEventListener('click', function (e) {
var li = e.target.closest('li[role="option"]');
if (!li) return;
list.querySelectorAll('li').forEach(function (x) { x.removeAttribute('aria-selected'); });
li.setAttribute('aria-selected', 'true');
if (label) label.textContent = label.textContent.split(': ')[0] + ': ' + li.textContent;
close();
});
document.addEventListener('click', close);
});