display a text in HTML

Issue

I have an html code of a button. Inside the button I put a txt but the txt is not they told me that I must put a z-index I don't know how to use displayed

.btnWhite {
    display: inline-block;     
    text-decoration: none;
    width: 200px;
    height: 60;
    line-height: 60px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 135px;
    background: #2af598;
    background: -webkit-linear-gradient(top right, #2af598, #08aeea);
    background: -o-linear-gradient(top right, #2af598, #08aeea);
    background: -moz-linear-gradient(top right, #2af598, #08aeea);
    background: linear-gradient(top right, #2af598, #08aeea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
        
.btnGroup {
    position: relative;
    z-index: 1;
    }

<div class="btnGroup">
     <a href="#" class="btnWhite">
          <form action="essaye.html">
                <button type="submit">try</button>
          </form>
     </a>
     <div class="btnGroup">
     </div>

Solution

Your button text color (-webkit-text-fill-color) is transparent (= invisible) . Remove that or change it.

.btnWhite {
    display: inline-block;     
    text-decoration: none;
    width: 200px;
    height: 60;
    line-height: 60px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 135px;
    background: #2af598;
    background: -webkit-linear-gradient(top right, #2af598, #08aeea);
    background: -o-linear-gradient(top right, #2af598, #08aeea);
    background: -moz-linear-gradient(top right, #2af598, #08aeea);
    background: linear-gradient(top right, #2af598, #08aeea);
    -webkit-background-clip: text;
    }
        
.btnGroup {
    position: relative;
    z-index: 1;
    }

<div class="btnGroup">
     <a href="#" class="btnWhite">
          <form action="essaye.html">
                <button type="submit">try</button>
          </form>
     </a>
     <div class="btnGroup">
     </div>

Answered By - Johannes