鬆動CSS格式時變化<button>到<asp:Button>

Question

我使用下面的HTML和CSS設計我的web應用程序 - https://codepen.io/andytran/pen/PwoQgO

我需要用下面的替換按鈕標籤<button>Login</button>，

<asp:Button ID="bnLogin" runat="server" Text="Login" OnClick="bnLogin_Click" /> 

問題是，當我使用asp：Button元素而不是按鈕元素時，我失去了CSS樣式。

下面是相應的HTML -

<div class="form"> 
    <h2>Login to your account</h2> 
    <form id="form1" runat="server"> 
     <asp:TextBox ID="txtUserID" runat="server" Columns="50" placeholder="User ID" ></asp:TextBox> 
     <asp:TextBox ID="txtUserPassword" runat="server" Columns="50" TextMode="Password" placeholder="Password"></asp:TextBox> 
     <asp:Button ID="bnLogin" runat="server" Text="Login" OnClick="bnLogin_Click" /> 
     <br /> 
     <asp:Label ID="lblMsg" ForeColor="red" runat="server" /> 
    </form> 
</div> 

和相應的CSS -

.form-module button { 
    cursor: pointer; 
    background: #33b5e5; 
    width: 100%; 
    border: 0; 
    padding: 10px 15px; 
    color: #ffffff; 
    -webkit-transition: 0.3s ease; 
    transition: 0.3s ease; 
} 
.form-module button:hover { 
    background: #178ab4; 
} 

Answer 1

我認爲這將HEP您的問題。

.form-module input[type="submit"]{ 
    cursor: pointer; 
    background: #33b5e5; 
    width: 100%; 
    border: 0; 
    padding: 10px 15px; 
    color: #ffffff; 
    -webkit-transition: 0.3s ease; 
    transition: 0.3s ease; 
} 
.form-module input[type="submit"]:Hover { 
    background: #178ab4; 
} 

Answer 2

在你的CSS使用下面的代碼

.form-module input[type="submit"]:Hover { 
background: #178ab4; 
} 

，而不是

.form-module button:hover { 
    background: #178ab4; 
}