body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
}

.fill-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  border: 2px solid #222;
  background: transparent;
  color: #222;
  padding: 0.75rem 2rem;
  font: inherit;
  cursor: pointer;
}

.fill-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #222;
  z-index: -1;
  /* eine Zeile, ein transform-Wert — ein zweites "transform:" hier würde
     dieses hier überschreiben statt es zu ergänzen */
  transform: scaleX(0);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .fill-btn::before {
    transition: transform 0.3s ease;
  }
  .fill-btn {
    transition: color 0.3s ease;
  }
}

.fill-btn:hover {
  color: #fff;
}

.fill-btn:hover::before {
  transform: scaleX(1);
}