Как я могу показать текст над эффектом наведения в CSS?

Question

Я пытаюсь создать эффект наведения, но текст не отображается над классом: before.

Вот код проекта https://codepen.io/designextras/pen/WNrJdbR

Я не уверен, что мне нужно отредактировать, чтобы отобразить текст выше, так как текст кнопки я не могу добавить z-index

Вот 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;
 } 

Вот html

 <button class="btn-2">HOVER</button> 

Answer 1

Попробуйте добавить этот css код:

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

например:

ref: https://codepen.io/nani554/pen/jOWxYmG