.filters button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  box-shadow: 0 7px 20px var(--tab-glow,rgba(7,80,68,.12));
  transition: color .25s,background .25s,border-color .25s,box-shadow .25s,transform .25s;
}
.filters button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tab-color,#075044);
  opacity: .1;
  transition: opacity .25s;
}
.filters button:nth-child(1) { --tab-color:#075044;--tab-glow:rgba(7,80,68,.2) }
.filters button:nth-child(2) { --tab-color:#d45c91;--tab-glow:rgba(212,92,145,.23) }
.filters button:nth-child(3) { --tab-color:#c58a22;--tab-glow:rgba(197,138,34,.24) }
.filters button:nth-child(4) { --tab-color:#8059ba;--tab-glow:rgba(128,89,186,.22) }
.filters button:nth-child(5) { --tab-color:#d56450;--tab-glow:rgba(213,100,80,.22) }
.filters button:hover,.filters button:focus-visible {
  color: #fff;
  border-color: var(--tab-color);
  background: var(--tab-color);
  box-shadow: 0 9px 26px var(--tab-glow),0 0 17px var(--tab-glow);
  transform: translateY(-3px);
  outline: none;
}
.filters button:hover::before,.filters button:focus-visible::before { opacity: 1 }
.filters button.active {
  color: #fff;
  border-color: var(--tab-color);
  background: var(--tab-color);
  box-shadow: 0 8px 24px var(--tab-glow),0 0 14px var(--tab-glow);
}
@media(prefers-reduced-motion:reduce) { .filters button { transition:none } }