From time to time, I am asked by visitors how they can insert a button into their web page using HTML. This article answers that question.
I will assume here that you know a bit of HTML and CSS, and at the very least, know how to insert HTML code into a web page.
There are at least 3 commonly-used ways of adding buttons.
As it happens, HTML has a specific element/tag for a button, called, appropriately, <button>.
If you are using the element to submit the contents of a form, the basic syntax is:
When clicked, the browser will send teleporter=activate to the script (ie, computer program)
specified in the form's action attribute. That is, the text sent is the content of the "value"
attribute assigned to the content of the "name" attribute. For example, if a form is written as
<form action="teleporter.php">, the "teleporter.php"
script will receive teleporter=activate as part of its input. The text sandwiched between the
opening and closing button tags, "Click to activate teleporter", is displayed on the
button.
Note that Internet Explorer 6 ("IE6") will apparently submit teleporter=Click to activate teleporter instead, as
well as submit all the other buttons in the form. Internet Explorer 7 ("IE7") fixes it so that it only sends the wrong
value. Internet Explorer 8 and above do it correctly. That said, I suspect that there are few, if any, IE6 and 7 users
left on the Internet nowadays, since there are so many
HTTPS websites with
a modern version of SSL that do not work in those browsers. You will of course have to check your
own website's statistics to be sure. If you want to avoid the problem, use the same text in the value
attribute as your user-visible text, and stick to only one button per form.
Other ways of adding buttons into forms include using <input type="button"> and
<input type="submit">. The latter is often used as the main button on a form to send its
contents. For example, the Free Contact Form
Wizard uses it on the forms it generates. The <input> tag is less flexible,
though, in that the text displayed on the button is specified in the value attribute, in contrast with
<button>, where it is placed between the latter's opening and closing tags. (Read on if you
don't know why this makes it more flexible.)
If <button> is not used on a form, you should use type="button" as its attribute instead of
type="submit".
The code produces the following button:
By default, clicking it has no effect. For such standalone buttons, people typically attach some JavaScript code to the button so that when it is clicked, that program will execute. For example, the optional hamburger menu button created by the Free Navigation Menu Wizard adds a JavaScript snippet that expands the menu when the button is clicked. (You can see the button in action on the hamburger menu demo page. Visit that page in a mobile phone, or with your desktop browser resized to mobile phone widths, to see it.) The HTML code in question looks like this:
The onclick="tsw_expand_navmenu();" attribute causes the browser to execute the Javascript function
tsw_expand_navmenu() when the button is clicked. The
Navigation Menu Wizard
automatically generates the code for that function when you select the hamburger menu button option. If you are
using some other code to accomplish a different task, you should of course replace tsw_expand_navmenu()
with it.
As you may have noticed from the demo, the button's appearance has been changed using CSS so that it is no longer the default grey ("gray" if you use a different variant of English) used by most browers. You can do the usual thing of changing a button's colour ("color"), width, font used and so on with CSS, which is what I did there.
Since the content displayed on the button is placed between <button> and </button>,
you can even use an image on it: just enclose the <img> tag for that picture between the
opening and closing button tags. This affords you greater flexibility for the button's appearance.
You are not restricted to using text alone (as you would have if you used <input>) and you
can style individual words on that button differently if you wish.
Another example of using a button outside a form can be found in How to Use JavaScript to Change a Website's Theme. In that article, clicking the demo button invokes a JavaScript that changes the page's appearance.
If all you want is to create buttons for a navigation menu, like what you see on the left column of
thesitewizard.com, including the very page you are reading now, then the quick and easy way is to use
the Navigation Menu
Wizard to generate them for you. It's free and no coding is needed.
The wizard doesn't actually create buttons using the HTML <button> element, but instead
draws buttons manually, from
ordinary links placed in
unordered lists.
If you prefer to do it yourself, a discussion of the technique used can be found in How to Create 3D Buttons Using CSS.
If you want to create a button with rounded corners, or even perfectly round buttons, please read How to Put Rounded Buttons on Your Website for more information on how to alter the shape of the buttons.
Copyright © 2019-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Insert a Button into a Web Page (HTML)
