display a text in HTML - html

Question

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>

Answer 1

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>

Answer 2

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

Answer 3

dude remove this
-webkit-text-fill-color: transparent;
color attributes apply for text formats and when you use transparent property for it it not showing because of it's bloody transparent.insted of transparent you can add color what you want
eg:-
-webkit-text-fill-color: black;