How to make button fall in pseudo-element on hover?-CodePudding

I'm attempting to make a button that has an ::after content of transparent background and white border. Button is supposed to fall into that content without ::after changing any position.

I'm having some trouble figuring it out.

Here's the code.

button {
 position: relative;

  color: black;
  font-size: 1.625rem;

  background-color: yellow;
  border: 1px solid white;

  padding: 15px 50px;

  cursor: pointer;
} 

button::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;

  width: 100%;
  height: 100%;

  background: transparent;
  border: 1px solid white;

  transition: all 0.3s;

  z-index: -1;
}

You can find exact look on this JFiddle Link: https://jsfiddle.net/d7knzb1p/6/

thank you all

CodePudding user response：

You can try to have :hover for your button and button::after

button:hover::after to reset the shadowed layer to the original button

Another key change here is that we'd use translate for the better animation

body {
  background-color: black;
}

button {
 position: relative;

  color: black;
  font-size: 1.625rem;

  background-color: yellow;
  border: 1px solid white;

  padding: 15px 50px;

  cursor: pointer;
  transition: all 0.2s;
}

button:hover {
  background-color: transparent;
  transform: translate(0.8rem, 0.8rem);
  color: white;
}
button:hover::after {
  content: "";
  transform: translate(-0.8rem, -0.8rem);
}

button::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  transform: translate(0, 0);

  width: 100%;
  height: 100%;

  background: transparent;
  border: 1px solid white;

  transition: all 0.2s;

  z-index: -1;
}

<button>
BUY 
</button>