CSS问题样式按钮

Question

我正在尝试使用CSS设置按钮样式。以下是按钮的HTML代码：

<button class='custombtn' name="doLogin" type="submit" id="doLogin3" value="Login">Login</button>

这是CSS代码。

.custombtn {
    width:163px;
    height:43px;
    background-image:url('images/normal.png');
    background-color:#d3d3d3;
}
.custombtn:hover {
    background-image:url('images/hover.png');
}
.custombtn:active {
    background-image:url('images/click.png');
}

我认为一切都很好＆amp;花花公子，直到我看到结果。 而不是像这样的东西，上面有文字：

看起来像这样：

我已经在网上阅读了大约一个半小时的修补程序，但是没有一个能够正常工作。我知道它的样式可能看起来像这样，我只需要找到一种方法。

normal.png

hover.png

click.png

Answer 1

您需要在border:none; background-color:transparent;上明确设置.custombtn。

Answer 2

您需要将边框设置为无。这绝对可以解决问题，并确保图像本身没有空白区域。

Answer 3

我认为按钮的背景和边框是你头痛的原因。

尝试这样的事情：

.custombtn {
    margin: 10px;
    width:163px;
    height:43px;
    background-image:url('images/normal.png');
    background-color: transparent;
    border: none;
}
.custombtn:hover {
    background-image:url('images/hover.png');
}
.custombtn:active {
    background-image:url('images/click.png');
}​