Przykrywanie tekstu przez tło po najechaniu przycisku

pytanie zadane 28 sierpnia 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)
edycja 28 sierpnia 2022 przez jasper93

Witam, napotkałem kolejny problem podczas robieniu animacji na przycisku, chciałbym by tło wyjeżdżające z lewej strony przycisku nie przykrywało tekstu, gdyby tło pod tekstem było koloru białego użyłbym właściwości transparent, a tak to w przypadku koloru szarego nie wiem jak podejść do tematu. Próba z z-index nie zdaje egzaminu, ma ktoś jakiś pomysł czy przy obecnej strukturze kodu da się coś zrobić??

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <button>button</button>
  </body>
</html>

body {
        text-align: center;
      }

      button {
        position: relative;
        padding: 10px 25px;
        font-size: 40px;
        margin-top: 100px;
        border: 2px solid black;
        background-color: grey;
        border-radius: 20px;
        box-shadow: 0 0 0 2px white, 0 0 0 4px black;
        overflow: hidden;
        color: black;
        transition: 0.25s 0.05s linear;
      }

      button::after {
        content: "";
        position: absolute;
        width: 0;
        height: 100%;
        bottom: 0;
        left: 0;
        background-color: #000;
        transition: 0.3s linear;
        /* z-index: -1; */
      }

      button:hover::after {
        width: 100%;
      }

      button:hover {
        color: white;
      }

1 odpowiedź

odpowiedź 29 sierpnia 2022 przez VBService Ekspert (252,740 p.)

z-index działa pod warunkiem, że ustawisz go i dla button-a i dla button::after

button {
  position: relative;
  padding: 10px 25px;
  font-size: 40px;
  margin-top: 100px;
  border: 2px solid black;
  background-color: grey;
  border-radius: 20px;
  box-shadow: 0 0 0 2px white, 0 0 0 4px black;
  overflow: hidden;
  color: black;
  transition: all 0.25s 0.05s linear;
  z-index: 1;
}

button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: #000;
  transition: 0.3s linear;
  z-index: -1;
}

1	komentarz 29 sierpnia 2022 przez jasper93 Obywatel (1,310 p.) Znowu mi ratujesz życie, niby takie drobne rzeczy, a ciągle mam problem, żeby na nie wpaść.

komentarz 29 sierpnia 2022 przez jasper93 Obywatel (1,310 p.)
edycja 29 sierpnia 2022 przez jasper93

Jeszcze chciałem dopytać, dlaczego w przypadku z-index:0 w selektorze button::after tekst zostanie przykryty? Skoro index:0 jest mniejszy od z-index w selektorze button?? Wynika to z faktu, że z-index:0 nie zmienia nic w układzie, czy jest to inna zależność?

komentarz 30 sierpnia 2022 przez VBService Ekspert (252,740 p.)

Difference between auto, 0, and no z-index?

komentarz 30 sierpnia 2022 przez jasper93 Obywatel (1,310 p.)

Właśnie czytałem ten watek i wolałem się upewnić, czyli z index: 0 to domyslna wartosc w stosunku do rodzica elementu, czyli tak naprawdę jakbym nie zmienił nic w z-index.