Transparent Button Background with Gradient Text and Border Effect - Hover Problem

Question

As a beginner in CSS, I've been learning for a few months now, and I recently encountered an issue while practicing gradients. Specifically, I created a button with a gradient background and wanted to add an effect where the background becomes transparent upon hovering, while the button border and text maintain the gradient coloring.

I've made progress and gotten close to the desired result, as you can see in this CodePen: https://codepen.io/Si1enzio/pen/gOEVwNz.

.btn-talk {
    color: #fff;
    text-decoration: none;
    padding: 8px 35px;
    border-radius: 10px;
    border: 2px solid transparent;
    font-weight: 500;
    transition: .3s;
    background: linear-gradient(#91b424, #00916e);
    background-clip: border-box;
    background-origin: border-box;
} 

.btn-talk:hover {
    border-radius: 10px; 
    border: 2px solid transparent; 
    background: transparent;
    background:linear-gradient(#91b424, #00916e) border-box; 
    -webkit-mask: 
       linear-gradient(#fff 0 0) padding-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude; 
}

.btn-talk-text {
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    border: 2px solid transparent;
    font-weight: 500;
    transition: .3s;
}
.btn-talk-text:hover {
    color:transparent;
    text-decoration: none;
    background-image: linear-gradient(#91b424, #00916e);
    background-clip: text;
} 

.container {
    text-align: center;
    width: 200px;
    height: 100px;
    padding: 20px 50px;
    background: yellow;
}

<div class="container">
  <a href="#" class="btn-talk cursor-scale small">
    <span class="btn-talk-text">Click Me!</span>
  </a>
</div>
<br>

However, I'm facing a problem where the link text disappears when hovering over the button.

In the attached image you can see the desired result. >> click here - desired result <<