Is it possible to replace an asp:button with a HTML element

Question

I'm using asp forms and wanted to know if it's possible to replace the standard buttons with HTML elements that are styled using CSS.

My login page uses a standard button

<asp:Button ID="LoginButton" runat="server" Text="Login" 
    onclick="LoginButton_Click" />

linked to code behind (C#) which performs the login check.

I've seen some nice buttons implemented using the HTML <button> element and styled with CSS which can have features such as images and roll over highlighting. The basic HTML looks like this

<button type="submit" class="positive" onclick ="...">
    <img src="/icons/tick.png" alt=""/> 
    Login
</button>

I've seen another question discussing the Difference between asp:button and html's button so I understand the <button> element is not a drop-in replacement but I'd like to know if the asp:button can be replaced and still call the LoginButton_Click C# code behind?

EDIT:
Although I'm using ASP I don't mind using some client side javascript if necessary.

The buttons I saw which got me thinking about this were found here: Rediscovering the Button Element

EDIT 2: I tried the answer from XIII using the LinkButton asp control and that worked, rendering the button as I wanted and activating the C# when clicked

<asp:LinkButton ID="LoginBtn" CssClass="button positive"
        OnClick="LoginButton_Click" runat="server">
    <img src="/icons/tick.png" alt=""/> 
    Login
</asp:LinkButton>

Javascript is inserted in to the page (as mentioned by Curt) which was not a problem for me but may be for other people; but since the asp:loginview and other controls associated with forms authentication already need javascript I'm not sure this is a problem with the solution.

I decided to accept jwiscarson's answer as this is a cleaner implementation and, despite what I thought, <button> can be a drop-in replacement for <asp:button>

Answer 1

The answer to your question:

if the asp:button can be replaced and still call the LoginButton_Click C# code behind?

is yes. If you have a button like:

<button type="submit" id="submit" class="positive" runat="server">Submit</button>

The attribute you need to set is not onclick, but onserverclick. You could also do something like:

protected override OnInit(EventArgs e)
{
    submit.ServerClick += new EventHandler(submit_ServerClick);
}

If you need to do styling on that button, I think the best way to tackle that is via CSS classes like you have in your example.

Answer 2

You may set CSS class via cssClass property of <asp:Button/>. However you may set runat="server" and onserverclick="LoginButton_Click" attribute to <button/>.

Answer 3

An alternative approach would be to make use the LinkButton control and style that completely with CSS. We used to do so for a certain project in the past. Worked out pretty great for our customer.

The property of interest if CssClass

Answer 4

You could use HTML button if you desire, and learn how to call the __doPostBack() method with the proper arguments. Asp.Net buttons and HTML buttons are pretty much the same when it comes to the way they are rendered in the client.

Answer 5

As had been posted here already you could style the HTML rendered by your asp:button or use another asp control. Your asp:button will be rendered as a <input type="submit"> with possibly more limited CSS options than a <button> tag.

From some googling I think it is possible to get a <button> tag rendered but it looks like a non trivial excercise see How can I use the button tag with ASP.NET?