button inside a div wont display it's relative text

Question

I am working with ReactJS and I am creating a simple clickable button but here's the problem: It wont show the written message on button when I place it inside a div.

Screenshot:

Code snippet:HTML

.nm:hover {
  background-image: url(../assets/glitchnoise.jpg);
  text-shadow: -1px 0px 21px rgba(255,255,255,0.46);    
  background-size: 400% 400%;
    background-position: -100%;
    -webkit-background-clip: text;
            background-clip: text;

            animation: animatedtext-slow .2s infinite alternate-reverse;
    transition: .8s ease-in-out;
    -webkit-touch-callout: none; /* Safari */
    -webkit-user-select: none; /* Chrome */     
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
      }


      @keyframes animatedtext-slow {
        from {
           background-position: -100%;
        }
        to{
          background-position: -400%;
        }
      }


.btn-component{
  display: flex;
  position: relative;
  justify-content: center;
  
  
}
  
.btn{ 
width: 173px;
height: 47px;
background: rgba(255, 255, 255, 0.93);
border: 1.5px solid #000000;
font-family: 'Maiden Orange';
font-style: normal;
font-weight: 400;
font-size: 24px;


filter: drop-shadow(5px 5px 4px #000000);
  }

<div className='nm'> FLEXITY
        <div className='btn-component'>
          <button className='btn'>LISTEN NOW</button>
         </div>
        </div>

I do not understand why the text inside the button isn't displayed. While I tried to take the btn-component out, and it displays the content of button correctly i.e "LISTEN NOW". I cannot take the btn-component out as it is a responsiveness issue if done so.

What else can I try?

Tech Stack: ReactJS

Answer 1

The problem was in the parent div:

at line:-webkit-text-fill-color: transparent;

adding this to the box div: -webkit-text-fill-color: black; works