如何在按鈕中包含圖像或文本？

Question

你好我試圖把一個按鍵內的文字或圖像能有人幫我做這這裏是我做了什麼

<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> 

所以請人糾正我，告訴我如何進入按鈕也在裏面文本圖像感謝你們的援助（Y）

Answer 1

首先，<center>標記已被棄用，所以不要使用它;第二，更重要的是，你可以只（直譯）放在圖像內的<button>：

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

要包括文本，然後（如暗示，以上）時，<button>元素可以包含（非交互式）HTML元素，如：

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

如果，當然，你需要這個圖像是一個背景圖像的<button>，然後CSS也將讓你實現一個：

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

參考文獻：

• <button>。
• <center>。

Answer 2

把文本到您的按鈕使用：

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

爲了將圖像插入按鈕：

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

編輯：要改變按鈕的大小，使圖像適合它使用：

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

只需使用您的圖像的大小改變兩個100像素！