20 CSS Tags & Chips Designs 09 / 20
Pixel Grid
Chip background is a tiny dotted CSS pattern reading as retro/print.
The code
<a href="#" class="ctc-pixel">RETRO</a>
<a href="#" class="ctc-pixel">RETRO</a>.ctc-pixel {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border: 2px solid #f5a84a;
border-radius: 4px;
background-color: #1a1410;
background-image: radial-gradient(#f5a84a 1px, transparent 1px);
background-size: 8px 8px;
color: #f5a84a;
font:
700 12px/1 ui-monospace,
monospace;
letter-spacing: 0.14em;
text-decoration: none;
transition:
background-size 0.4s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.ctc-pixel:hover {
background-size: 4px 4px;
color: #ffd479;
border-color: #ffd479;
} .ctc-pixel {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border: 2px solid #f5a84a;
border-radius: 4px;
background-color: #1a1410;
background-image: radial-gradient(#f5a84a 1px, transparent 1px);
background-size: 8px 8px;
color: #f5a84a;
font:
700 12px/1 ui-monospace,
monospace;
letter-spacing: 0.14em;
text-decoration: none;
transition:
background-size 0.4s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.ctc-pixel:hover {
background-size: 4px 4px;
color: #ffd479;
border-color: #ffd479;
}