HTML Button
This page contains code for creating an HTML button. Feel free to copy and paste the code into your own website or blog.
There are two basic ways of creating an HTML button; with the <button> tag, and with the <input> tag. This page provides code for both methods.
Using the <input> Tag
This example uses the <input> tag to create a basic button. Within the code, we use type="button" to set the control to a button.
In this example, we've added JavaScript to display a message to the user once they click the button.
Example:
Using the <button> Tag:
This example uses the <button> tag to create the button. This is a tag specifically for creating buttons.
The type attribute accepts 3 possible values; button, submit, and reset
Example:
HTML Button with Image:
One of the cool things about the <button> tag is that it allows you to place HTML code between the <button> and </button> tags. This example combines an image and some text.
Example:
Difference Between the <input> Tag and <button> Tag:
At first glance, it may appear that there's not much difference between using the <button> tag and <input> tag. But there are some differences.
The main difference is that the <button> tag allows you to place HTML code in between the opening and closing tags. The <input> tag is an empty tag (i.e. it doesn't have a closing tag), so you can't add content to the tag.
Another key difference between the two tags is with the value attribute. The <input> tag uses this attribute to display a label on the button (e.g. "Click me!"). With the <button> tag, on the other hand, the value attribute is submitted along with any form contents and can be used for processing.
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties