background slides out on button-CodePudding

Hello I have a little problem with my background which is used on button::after element. Effect I would like to have it's background slide out from left to right's button side but it cover my whole text. I tried to use z-index but it doesn't work at all. Any ideas how to approach this problem?

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;
      }

<!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>

CodePudding user response：

As you are using button::after to create the slide out effects on background, it will create a pseudo-element that is the last child of the button.

To solve the issue, we will need to make the button text appears on top of the pseudo-element by wrapping the button text in an extra <p> tag so that we can apply CSS style z-index: 1; to bring it to the top.

<button>
  <p>button</p>
</button>

button > p {
  margin: 0;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

Final code:

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;
}

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

button:hover {
  color: white;
}

/* Below are the newly added CSS styles, others are unchanged */
button > p {
  margin: 0;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

<button>
  <p>button</p>
</button>

CodePudding user response：

It's much easier to use box-shadow. You can use the inset property and horizontal offset to give you the same effect and it's much less css.

HTML

<button>button</button>

css

button {
  padding:0.5rem 2rem; border:2px solid black;
  box-shadow: 0px 0 0 0 black inset
}

button:hover {
  box-shadow: 200px 0 0 0 black inset;
  transition: box-shadow 1s, color 1s;
  color:white;
}

I've put an example here. Just tweak to suit your needs

CodePudding user response：

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;
        z-index: 2;
      }


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

<!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>

Is this like you wanted?