Back to CSS Tags & Chips Liquid Fill Pure CSS
Share
.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; }
<a href="#" class="ctc-liquid"><span>FILTER</span></a>
Live preview Edit any tab — preview updates live Ready