20 CSS Tags & Chips Designs 04 / 20
Liquid Fill
Outline chip whose interior fills with brand colour from left-to-right on hover.
The code
<a href="#" class="ctc-liquid"><span>FILTER</span></a>
<a href="#" class="ctc-liquid"><span>FILTER</span></a>.ctc-liquid {
position: relative;
display: inline-flex;
align-items: center;
padding: 10px 22px;
border: 1.5px solid #00e5ff;
border-radius: 6px;
font:
700 12px/1 ui-monospace,
monospace;
letter-spacing: 0.14em;
color: #00e5ff;
text-decoration: none;
overflow: hidden;
background: #0a0a18;
}
.ctc-liquid::before {
content: "";
position: absolute;
inset: 0;
right: auto;
width: 0;
background: #00e5ff;
transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.ctc-liquid:hover::before {
width: 100%;
}
.ctc-liquid span {
position: relative;
mix-blend-mode: difference;
color: #fff;
} .ctc-liquid {
position: relative;
display: inline-flex;
align-items: center;
padding: 10px 22px;
border: 1.5px solid #00e5ff;
border-radius: 6px;
font:
700 12px/1 ui-monospace,
monospace;
letter-spacing: 0.14em;
color: #00e5ff;
text-decoration: none;
overflow: hidden;
background: #0a0a18;
}
.ctc-liquid::before {
content: "";
position: absolute;
inset: 0;
right: auto;
width: 0;
background: #00e5ff;
transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.ctc-liquid:hover::before {
width: 100%;
}
.ctc-liquid span {
position: relative;
mix-blend-mode: difference;
color: #fff;
}