How can I reverse the movement of my pseudo element transition?-CodePudding

So I'm trying to make this button animation while learning about pseudo-elements and I'm really close to achieving what I want but there's something that really bugs me.

This is what I have currently: https://codepen.io/saifeldeenadel/pen/xxPwvdj?editors=1100

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(50vh - 40px);
}

#btn {
  position: relative;
  background: transparent;
  color: white;
  letter-spacing: 3px;
  padding: 10px 25px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 13pt;
  border: 0px;
  transition: 0.2s ease-in;
}

#btn:hover {
  color: black
}

#btn::before {
  content: '';
  background: #333333;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; 
  z-index: -1;
  transition: height 0.2s ease-in;
}

#btn:hover::before {
  height: 0%;
}

Looks pretty good. But what I want is for the background to go from top to bottom rather than bottom to top. Every way I try to manipulate it, it results in me ruining the whole thing, for example trying to set the background of the button element to the dark grey and having the pseudo-element be the white results in the element completely covering the text and so ruining the effect, etc.

So if you have any idea please.

CodePudding user response：

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(50vh - 40px);
}

#btn {
  position: relative;
  background: transparent;
  color: white;
  letter-spacing: 3px;
  padding: 10px 25px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 13pt;
  border: 0px;
  transition: 0.2s ease-in;
}

#btn:hover {
  color: black
}

#btn::before {
  content: '';
  background: #333333;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0; 
  z-index: -1;
  transition: height 0.2s ease-in;
}

#btn:hover::before {
  height: 0%;
}

<button id='btn'>know more </button>

In #btn::before cancel top: 0 and add bottom: 0 then it should work as you want

CodePudding user response：

There are many approaches to this, you could use transition: top 0.2s ease-in; instead of height transition.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(50vh - 40px);
}

#btn {
  position: relative;
  background: transparent;
  color: white;
  letter-spacing: 3px;
  padding: 10px 25px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 13pt;
  border: 0px;
  transition: 0.2s ease-in;
}

#btn:hover {
  color: black
}

#btn::before {
  content: '';
  background: #333333;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  top: 0; 
  z-index: -1;
  transition: top 0.2s ease-in;
}

#btn:hover::before {
  top: 100%;
}

<button id='btn'>know more </button>