CODEWITHSUNDEEP
javascripthtmlcss
Istanbouly
Istanbouly

Reputation: 39

How to include an image or text inside a button?

hello am trying to put a text or image inside a button can anybody help me doing this here is what i have done 

<div id ="bss"><input class="but" type="button" /><center>Mohammad ghazi istanbouly</center></div>


<style type="text/css">
            .but{
              width:100px;
              height:35px;
              box-shadow: 5px 5px 10px #777;
              position: absolute;
              top:20px;
              left:22px;
              background-color: #000;
              background: rgba(0,0,0,0.86) ;
              border-radius: 15px;
              color: yellow ;
            }


   </style>


<script type="text/javascript">

           var bss_node = document.getElementById("bss");
           bss_node.style.color = "#000"  ;
           bss_node.style.fontSize ="50px"     ;
           bss_node.style.border = "1px solid #000" ;
           bss_node.style.boxShadow ="10px 5px 10px #777"     ;
           bss_node.style.borderRadius ="15px"

           var but_node = document.getElementById("but") ;
           but_node.innerText="Log in"

     </script>

so please anyone correct me and show me how to enter a text inside the button also the image thanks for your helping (Y)

Upvotes: 0

Views: 83

Answers (2)

Paco
Paco

Reputation: 129

to put a text into your button use this:

<input class="but" type="button" value="SOME TEXT IN THE BUTTON" />

To insert an image into the button:

<input class="but" type="button" style="background-image: url(myimage.png)"/>

Edit: To change the size of the button so that the image fits in it use this:

<input class="but" type="button" style="background-image: url(myimage.png); width: 100px; height: 100px"/>

Simply change the two 100px with the size of your image!

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

First, the <center> tag is deprecated, so don't use it; second, and more to the point, you could just (literally) put in image inside of a <button>:

<button><img src="path/to/image.png" /></button>

To include text, then (as implied, above), the <button> element can contain (non-interactive) HTML elements, such as:

<button><p>Whatever text you'd like to enclose</p></button>

If, of course, you need this image to be a background-image to the <button>, then CSS would also allow you to implement that:

button {
    background-image: url(path/to/image.png);
}

References:

Upvotes: 1

Related Questions