<button type="button">Force Quit</button> <button type="button">Cancel</button> <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.
Created: Friday September 25, 2015