把一個圖片按鈕上的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

回答

相關問題