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'); 
} 

我以为一切都很好&丹迪，直到我看到结果。 ，而不是像这样的文字就可以了：

它看起来像这样：

我一直在阅读这些在线修复围绕一个半小时但是他们都没有工作。我知道有可能让它看起来像这样，我只需要找到一种方法。

normal.png

hover.png

click.png

Answer 1

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

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'); 
}​