display a text in HTML-CodePudding

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 >
     <a href="#" >
          <form action="essaye.html">
                <button type="submit">try</button>
          </form>
     </a>
     <div >
     </div>

CodePudding user response：

Your form has a linear-gradient background and this is being clipped by text.

However, your button, which is a child of the form, has by default a light gray background so this is covering the form's background.

A simple fix is to give the button a transparent background:

.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;
    }
    button {
      background-color: transparent;
    }
        
.btnGroup {
    position: relative;
    z-index: 1;
    }

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

However, I suggest a couple of things. The first is to put your code through a validator, it is not correct to have a button inside an anchor element for example.

The second is to work carefully through the setting of that background gradient etc on the form, do you really want it (as opposed to a single color)? If so look up (MDN is a reliable source) exactly what each of those CSS properties mean, and which ones do and which ones don't still require prefixes.

CodePudding user response：

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 >
     <a href="#" >
          <form action="essaye.html">
                <button type="submit">try</button>
          </form>
     </a>
     <div >
     </div>