用图像样式化 HTML“提交”按钮？答案

【问题标题】：Style HTML "submit" buttons with images?用图像样式化 HTML“提交”按钮？
【发布时间】：2012-04-22 22:12:32
【问题描述】：

我想知道表单按钮上的图形。

我使用表单按钮而不是链接，因为它们看起来更好。

而不是这个：

 print ('<A HREF="vote.php?vote=up" REL="nofollow">Vote +</A>&nbsp;');
 print ('<A HREF="vote.php?vote=dn" REL="nofollow">Vote -</A> ');

我有这个：

 print ('<TD VALIGN="center"> ');
 print ('<FORM METHOD="post" ACTION="vote.php?vote=up" REL="nofollow"> ');
 print ('<P ALIGN="CENTER"> ');
 print ('<INPUT TYPE="submit" VALUE="Vote +" /> ');
 print ('</P> ');
 print ('</FORM> ');
 print ('</TD> ');
 print ('<TD VALIGN="center"> ');
 print ('<FORM METHOD="post" ACTION="vote.php?vote=dn" REL="nofollow"> ');
 print ('<P ALIGN="CENTER"> ');
 print ('<INPUT TYPE="submit" VALUE="Vote -" /> ');
 print ('</P> ');
 print ('</FORM> ');

现在，在这种情况下，我想在按钮上使用拇指向上和向下符号，而不是说“投票+”等。

有没有办法做到这一点？

【问题讨论】：

或者...可以查看exiting站点代码...

标签： image button styles

【解决方案1】：

您可以使用 CSS 来设置按钮样式，包括使用图像。这里有一些教程可以帮助您解决这个问题。

http://www.tyssendesign.com.au/articles/css/styling-form-buttons/

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

【讨论】：

【解决方案2】：

css

<style>
.btn1 input.submit-button {
    width: 120px;
    background-image:url(/images/vote1.png);
    background-repeat: no-repeat;
    background-position: 3px center;
    padding: 5px;
.btn2 input.submit-button {
    width: 120px;
    background-image:url(/images/vote2.png);
    background-repeat: no-repeat;
    background-position: 3px center;
    padding: 5px;
</style>

代码

print ('<INPUT TYPE="submit" VALUE="Vote +" class="btn1" /> ');

print ('<INPUT TYPE="submit" VALUE="Vote -" class="btn2" /> ');

【讨论】：