Home > Getting Started > ASP.NET Syntax > ASP.NET Syntax for HTML Controls > HtmlButton

HtmlButton Class   Button Element

---

Specifies a container for rich HTML that is rendered as a button.

Declarative Syntax

<button id="accessID" runat="server"
   onServerClick = "onServerClickHandler">
      buttontext, image, or control
</button>

For information on the individual members of this class, see HtmlButton in the class library.

This control requires both start and end tags.

The HtmlButton server control renders as an HTML <button> element.

This differs from <input type=button> in that it enables web developers to create rich UI form buttons that can be composed from embedded HTML elements ( and even other server controls ).

In addition, the HtmlButton control enables programming of the HTML <button> element.

The following sample illustrates use of the HtmlButton control.

• Modifying the Appearance of an HtmlButton Control

There are a number of ways to modify the appearance of an HtmlButton control.

You can assign style attributes to the button in the opening tag of the control element, include formatting elements around the text that you insert between the opening and closing tags of the control, or assign property value changes for the client-side onmouseover and onmouseout events, among others.

You can also include images within the button elements themselves or even include other Web Forms controls.

1. Declare an HtmlButton control on your Web Forms page:

<button runat="server">...</button>. 

2. In the opening tag of the control, include a style attribute and declare the styles that you want the button to display. For example, including the following code in the opening tag defines the font size and family, background color, border color, height, and width for the control.

style="font: 9pt verdana; 
   background-color:lightgreen; 
   border-color:black;
   height=30; 
   width:100"

1. Declare an HtmlButton control on your Web Forms page:

<button runat="server">...</button>. 

2. In the opening tag of the control, include the DHTML events that you want to handle in response to user behaviors. For example, including the following code causes the background color of the control to change to yellow when a user moves the mouse over the control.

onmouseover="this.style.backgroundColor='yellow'"

1. Declare an HtmlButton control on your Web Forms page:

<button runat="server">...</button>.

2. To format the button’s text, simply enclose the text within formatting tags.

<button runat="server"><b>Click Me!</b></button>

3. To place an image ( or other control ) on the button, include the markup for the image ( or other control ) within the control’s start and end tags. For example,

<button runat="server"><img src="/images/myImage.gif"></button>

displays the graphic file myImage.gif stored in your application’s /images directory.

The following example illustrates use of the concepts presented above, and also shows how to include code that is assigned to handle the onServerClick event of each button.

Here, we simply display a message through an HtmlGenericControl that is instantiated by a <p> element, whenever a button is clicked.

Modifying the Appearance of an HtmlButton Control Run Sample | View Source

HtmlButton Class   Button Element   Web Forms Events and Handlers