把一个图片按钮上的HTML

我写的是创建一个按钮代码

CSS

.button { 
     color: white; 
     width: 10%; 
     font-size: 15pt; 
     padding: .5em 1em; 
     cursor: pointer; 
     box-shadow: 2px 2px 5px hsla(0,0%,0%,.7); 
     text-shadow: 0px 0px 1px hsla(0,0%,0%,.8); 
     border-radius: 5px; 
     margin: 1em; 
     background-image: -webkit-radial-gradient(50% 0%,160% 100%,hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%, hsla(0,30%,400%,0)); 
     background-color: orange; 
     text-align: right; 
     display: inline-block; 
    } 

    img { 
     margin-top: -35%; 
     margin-left: -20%; 
     display: block; 
    }

HTML

<button class="button"><img src="img/Play.png" />Play</button>

但resualt是

谁能帮助我，我怎么把IMG在左侧按钮上？

来源

2015-10-05 combo_ci

[图像按钮（http://www.echoecho.com /htmlforms14.htm）是你的朋友 –

@bub imgbutton是好的，但它不接受文本...我想添加toxt到，但吨 –

请使用代码： CSS：

<style> 

    .button { 
     color: white; 
     width: 210px; 
     height: 35px; 
     text-align: left; 
     border: 0px; 
     font-size: 15pt; 
     padding: 0 0 0 65px; 
     cursor: pointer; 
     box-shadow: 2px 2px 5px hsla(0,0%,0%,.7); 
     text-shadow: 0px 0px 1px hsla(0,0%,0%,.8); 
     border-radius: 5px; 
     background: -webkit-linear-gradient(left, #cdb060 0%,#a5862e 100%); /* Chrome10+,Safari5.1+ */ 
     background-color: orange; 
    } 

    img { 
     display: block; 
     left: 0; 
     position: absolute; 
     top: -2%; 
     z-index: 1; 
    } 
</style>

和HTML：

<body> 
    <button class="button">Play Trauker</button> 
    <img src="img/play-stop.png" /> 
</body>

来源

2015-10-05 13:12:04

可以使用absolute position图像。

.button { 
     position:relative; 
    } 
img { 
     display: inline-block; 
     width:20px; 
     height:70px; 
     position:absolute; 
     left:2px; 
     top:-13px 
    }

jsfiddle link

来源

2015-10-05 12:46:29 Rasel

你把图像按钮里面......我希望把它在按钮和IMG比按钮 –

你的HTML有内部按钮图像更大的高度。 – Rasel

我的意思是我要玩图标的高度必须大于按钮的高度越大......在您的解决方案IMG的heit和按钮一样 –

把一个图片按钮上的HTML

回答

相关问题