<button> 更改为 <asp：按钮时丢失 CSS 格式>

Question

我正在为我的网络应用程序使用以下HTML和CSS设计 - 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

我认为它会解决你的问题。

.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;
}