将图像变成按钮图像：移除边框答案

【问题标题】：Turn Image into a Button Image: Remove borders将图像变成按钮图像：移除边框
【发布时间】：2010-12-05 07:27:30
【问题描述】：

我有这个带有以下 css 的链接。

    <a href="step1.php">Buy Now</a>

    //css

    #buy a {
    background:transparent url(signup_bt.gif) repeat scroll 0 0;
    color:#FFFFFF;
    display:block;
    font-size:14px;
    font-weight:bold;
    height:37px;
    line-height:38px;
    text-align:center;
    text-decoration:none;
    width:126px;
    }

#buy a:hover{
background:transparent url(signup_bt2.gif) repeat scroll left bottom;
}

我现在需要将其更改为要在表单中使用的提交按钮，并且看起来与以前完全一样。我这样做了：

<input type="submit" value="Buy Now" />

#buy input{
color:#FFFFFF;
font-size:14px;
font-weight:bold;
height:37px;
line-height:38px;
text-align:center;
text-decoration:none;
width:126px;
background:transparent url(signup_bt.gif) repeat scroll 0 0;
display:block;
}

#buy input:hover{
background:transparent url(signup_bt2.gif) repeat scroll left bottom;
}

它几乎工作了，但是它周围有一个可怕的边框，悬停时按钮进入页面。我该如何解决这个问题？

如何删除边框以及如何让按钮正常交换图像而不进入页面。

谢谢大家

【问题讨论】：

标签： html css image button

【解决方案1】：

去除边框

border:0px;

【讨论】：

我以为我试过了，但实际上是边框样式：我没有做！

【解决方案2】：

我在我的 CSS 中使用了边框：无。它对我有用。

【讨论】：

【解决方案3】：

你为什么不使用<input type="submit" src="signup_bt2.gif" />？

【讨论】：

这不会创建图像提交按钮。它将创建一个默认提交按钮。例如，在 Chrome 和 Firefox 中，它将创建一个标准按钮，分别带有文本“提交”和“提交查询”。