2011-04-24 109 views

回答

4
button { 
    background: orange url(images/icon.png) no-repeat 5px center; 
    text-align: left; 
    padding-left: 20px; 
} 

<button type="submit">Submit</button> 

和另一种方式:

button { 
    postion: relative; 
    text-align: right; 
    padding-right: 20px; 
} 

button img { 
    position: absolute; 
    top: 5px; 
    left: 5px; 
} 

<button type="submit"><img src="icon.png" /> Submit</button> 
+0

什么,如果我已经将背景设置为橙色?? – steve 2011-04-24 19:20:01

+0

查看我编辑的答案 – 2011-04-24 19:21:35

+0

你也可以这样做:'' – oblig 2011-04-24 19:23:32

0

如果您使用提交输入按钮,然后给一些按钮左填充,并添加图像作为非重复的背景图像的按钮与CSS。

<input type="submit" class="imageBut submitBut" value="My submit button text" /> 

CSS:

.imageBut { 
    padding-left: 30px; 
    background-position: 0 0; /* Adjust as appropriate */ 
    background-repeat: none; 
} 

.imageBut.submitBut { 
    background-image: url(path/to/image.png); 
} 
0

将沿东西的

input { 
    padding-left: 24px; 
    background: url(an-icon.png) 4px 50% no-repeat; 
} 

工作线?

0

嗯。如何像:

<img src="the-icon"><input type="submit"/> 
0

您还可以使用jQuery,像这样:

$("#button-submit").button({icons: {primary:'ui-icon-play'}}); 

随着HTML像这样:

<input type="submit" name="submit" id="button-submit" /><label for="button-submit">Start</label> 
相关问题