Back to CSS Tags & Chips Linked Group Pure CSS
Share
HTML
<div class="ctc-linked">
  <a href="#" class="ctc-linked-seg">Components</a>
  <a href="#" class="ctc-linked-seg">CSS</a>
  <a href="#" class="ctc-linked-seg">Buttons</a>
</div>
CSS
.ctc-linked {
  display: inline-flex;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.ctc-linked-seg {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  color: #c4b5fd;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background 0.15s,
    color 0.15s;
}

.ctc-linked-seg:last-child {
  border-right: 0;
}

.ctc-linked-seg:hover {
  background: rgba(124, 108, 255, 0.18);
  color: #fff;
}