松动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; 
}