如何在按钮中包含图像或文本？

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像素！