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