20 CSS Tags & Chips Designs 19 / 20
Linked Group
Three connected chips sharing a single border with hairline dividers — like a segmented breadcrumb of tags.
The code
<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>
<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>.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;
} .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;
}