Inscription <button></button>

[simrah]

I can't put the inscription on the image. Through value No, it's not. input♪ Can you tell me what to do?

Html:

<button type="submit" id="cal-btn">
   <img src="images/cl.png" alt="submit">
</button>

Css:

#cal-btn {
    background: transparent;
    position: absolute;
    margin-top:35%;
    width:20%;
    margin-left:42%;
    height:10%;
    cursor:pointer;
    border:none;
}
#cal-btn>img {
    border-radius:10px;
    width:100%;
    height:100%;
}

[Oba22]

For your HTML demands, it's like,

<button type="submit" id="cal-btn">
   <img src="images/cl.png" alt="submit">
   <span class="btn-title">Календарь</span>
</button>

And the cs will be like this:

#cal-btn {
    background: transparent;
    position: absolute;
    margin-top:35%;
    width:20%;
    margin-left:42%;
    height:10%;
    cursor:pointer;
    border:none;
    position:relative;
}
#cal-btn>img {
    border-radius:10px;
    width:100%;
    height:100%;
}
.btn-title {
    position:absolute;
    line-height:0;
    font-size:14px;
    top:50%;
    width:100%;
    display:block;
    text-align:center;
}

It's your idea.

P.S.: Actually, it's better to use the picture through the background-image.

Html

<button type="submit" id="cal-btn">Календарь</button>

Css

#cal-btn {
    background-color:#dddddd;
    background-image:url("images/cl.png");
    background-repeat:no-repeat;
    background-position:50% 50%;
}