asmgx asmgx - 1 year ago 86
CSS Question

Loosing CSS format when change <button> to <asp:Button>

I have downloaded html design for my web app from here
https://codepen.io/andytran/share/zip/PwoQgO/

I needed to replace the

<button>Login</button>


with

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


the problem is that I lose the CSS style when I use the asp:Button instead of the button

this is the CSS part

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


This is the 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>

Answer Source

I think it will hep your issue.

.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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download