HTML Button Tag

You can create a clickable button on a web page with Cascading Style Sheets (CSS) as explained in Creating a button with CSS or simply use the HTML button tag. E.g., the following code could be used to create 3 clickable buttons:

<button type="button">Force Quit</button> &nbsp;&nbsp;&nbsp;  <button type="button">Cancel</button> &nbsp;&nbsp; <button type="button" style="background-color: CornflowerBlue;">Quit</button>

       

You can apply styles to the button, e.g., if you would prefer the button color to be something other than the default value as in the above example where the color name CornflowerBlue is used to change the color of the button to a light blue. Likewise you can apply a class or id attribute.

The buttons are clickable, but in the above case nothing happens if you click on them. But you can specify an event that will occur when someone clicks on a button. E.g., as with the HyperText Markup Language (HTML) code below, which will lead to a small window appearing with the specified text message in it when someone clicks on the button.

<button type="button" onclick="alert('We can\'t help everyone, but everyone can help someone.\n~ Ronald Reagan')">Help</button>

The \n in the message specifies a newline character, i.e., that what follows should appear on a new line. The \ before the single quote in "can't" is an escape character, i.e., since the single quote character, ', in "can't" would normally be interpreted as the matching ending quote to the single quote before "We", it indicates here that the single quote in "can't" should be treated as any other character in the word rather than a ending single quote matching the beginning one before "We".

Or you could, instead, have a click on the button open another webpage, e.g, I could use the following instead:

<button type="button" onclick="location.href='try.html'">Try</button>

You should always specify the button type, e.g., as with type="button" in the above examples, since different browsers may have different default types. The choices for type are button, reset, and submit, which you could use for forms.

 

TechRabbit ad 300x250 newegg.com

Justdeals Daily Electronics Deals1x1 px

Valid HTML 4.01 Transitional

Created: Friday September 25, 2015