How can I show my text above my hover effect in CSS? - css

Question

I'm trying to create a hover effect, but the text isn't showing above the :before class.
Here is a codepen of the project https://codepen.io/designextras/pen/WNrJdbR
I'm not sure what edit's I would need to make to show the text above since the button text I can't add a z-index
Here is the css
.btn-2 {
width: 300px;
height: 100px;
border: none;
color: black;
border-radius: 4px;
transition: 0.3s ease all;
font-size: 2rem;
letter-spacing: 4px;
border: 3px solid #FF0072;
border-radius: 4px;
position: relative;
}
.btn-2:hover {
color: #000;
}
.btn-2:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: "";
background-color: #FF0072;
z-index: 1;
}
.btn-2:hover:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
Here is the html
<button class="btn-2">HOVER</button>

Answer 1

Try to add this css code:
.btn-2 {
z-index: 1;
}
.btn-2:hover:before {
z-index: -1;
}

Answer 2

html
<button class="btn-2"><span>HOVER</span></button>
css
.btn-2 {
width: 300px;
height: 100px;
border: none;
color: black;
border-radius: 4px;
transition: 0.3s ease all;
font-size: 2rem;
letter-spacing: 4px;
border: 3px solid #FF0072;
border-radius: 4px;
position: relative;
}
.btn-2:hover {
color: #000;
}
.btn-2:before {
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: "";
background-color: #FF0072;
z-index: 1;
}
.btn-2:hover:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.btn-2 span {
color: orange;
z-index: 3;
position: relative;
}
.btn-2:hover span {
color: #000;
}
eg:
ref: https://codepen.io/nani554/pen/jOWxYmG