/* 1. Prepara todos os .btn */

.btn {
  position: relative;
  overflow: hidden;
  transition: color .35s;
  z-index: 1;
}

/* 2. Cria a película que sobe preenchendo */

.btn::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: translateY(100%);
  transition: transform .35s;
  z-index: -1;
  opacity: .15;
}

/* 3. No hover / focus, a película sobe */

.btn:hover::before, .btn:focus-visible::before {
  transform: translateY(0);
}

/* 4. Garante legibilidade caso o fill fique escuro/forte */

.btn:hover, .btn:focus-visible {
  color: #fff;
}