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

Question

I am using the following HTML and CSS design for my web app - https://codepen.io/andytran/pen/PwoQgO

I needed to replace the button tag <button>Login</button> with the following,

<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 element instead of the button element.

Here is the corresponding 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>

And the corresponding 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;
}

Tahsin Gül · Accepted Answer · 2017-07-27 06:04:39Z

2

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

answered Jul 27, 2017 at 6:04

Tahsin Gül

1188 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tahsin Gül Over a year ago

I'm glad to hear that :)

Supratik Rulz · Accepted Answer · 2017-07-27 06:41:06Z

0

Use the code below in your css

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

instead of

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

answered Jul 27, 2017 at 6:41

Supratik Rulz

2352 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related