Tag Chip Hover Effect: CSS Hover Effect

Tag Chip Hover Effect

Filter chips that fill with the accent on hover and grow a remove button, whose cross spins in as it appears. Only the hovered chip changes width, so the row reflows gently.

Also known as: chip hover css, removable tag on hover, filter chip close button.

CSS Motion Design

Color Base size 16px Dark background Hold hover state

HTML

<div class="hfx-chip-remove">
  <span class="hfx-chip-remove-chip">CSS<button aria-label="Remove CSS"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg></button></span>
  <span class="hfx-chip-remove-chip">Motion<button aria-label="Remove Motion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg></button></span>
  <span class="hfx-chip-remove-chip">Design<button aria-label="Remove Design"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg></button></span>
</div>

CSS

.hfx-chip-remove {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
}
.hfx-chip-remove-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 0.95em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 99em;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, padding 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-chip-remove button {
  display: grid;
  place-items: center;
  width: 0;
  height: 1.3em;
  margin-left: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  opacity: 0;
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), margin 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.2s ease;
}
.hfx-chip-remove svg {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  transform: rotate(-90deg) scale(0.5);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-chip-remove-chip:is(:hover, :focus-within) {
  padding-right: 0.45em;
  border-color: var(--c);
  background: var(--c);
  color: #fff;
}
.hfx-chip-remove-chip:is(:hover, :focus-within) button {
  width: 1.3em;
  margin-left: 0.45em;
  opacity: 1;
}
.hfx-chip-remove-chip:is(:hover, :focus-within) svg { transform: rotate(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .hfx-chip-remove, .hfx-chip-remove *, .hfx-chip-remove::before, .hfx-chip-remove::after, .hfx-chip-remove *::before, .hfx-chip-remove *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --hfx-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --hfx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Tag Chip Hover Effect

HTML

CSS

Customizing this snippet

Similar hover effects