Inscription <button></button>



  • 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%;
    }
    


  • 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%;
    }
    

Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2