HTML button tag

The tag used for creating HTML button is <button>. For example:

<button type=”button”>Submit</button>

Buttons are generally created within HTML forms. These are normally attached to JavaScript function with onclick or other events. Buttons are used to submit data to server, navigation between web pages (next, previous, random etc.) or other purpose.

You can use buttons outside of form as well. If you intend to use button outside form then use <button> tag e.g. to create navigation.

If you are using it in forms then use <input> tag to create buttons.

Button has different types, which is specified in button attribute. The button tag has following type values:

  1. Button (normal button with text or image)
  2. Submit (used to submit form data to target page)
  3. Reset (Resets form values to default)

HTML buttons can be presented as text or as image as well. We will show you how to use buttons in HTML forms or outside of the form. The examples below will show how to attach JavaScript functions to the button event. The examples will also show how to style CSS buttons.

A few examples of using HTML buttons

Example of button onclick

Multiple buttons example with next previous random

A button as link example

A submit button example

CSS button example with different CSS properties

A button example with background image

A basic example of creating a button

The example below shows creating a basic button with type=”button”.

Experience this online

Example of HTML button onclick

The following example attaches a JavaScript function to onclick event of button element.

Experience this online

Example of a button with double click

The following example attaches a JavaScript function to the ondblclick event of button element.

Experience this online

Multiple buttons example with next previous random

The following example shows using multiple buttons i.e. Next, Previous and Random. As you click on any button, the onclick event will trigger JavaScript function where you can place JavaScript functionality. For the demo, we have just used an alert.

Experience this online

A demo of button as link

You can also make button that is linked to a URL or act like hyperlinks. Examples below show different ways to make URLs linked to HTML button.

Attaching a button tag to link tag

You can add button tag to <a> tag. Though this is not recommended officially to make <button> child of <a>, this technique works on many browsers.

Experience this online

Attaching a button tag to link tag example

Alternatively, you can attach <a> tag to <button> tag to make button behave as a link. See example below.

Experience this online

You can apply style to button or <a> tag to make it look beautiful, explained below in CSS button section.

HTML button link with onclick event example

You can simply use location.href function attached to onclick event of button to act like a link as shown below.

Experience this online

A submit button demo

The submit button is used to submit information to the server gathered in HTML forms. This information like Login page, contact page form, account creation form etc. then can be processed to save into database, sending emails etc.

The example below shows using HTML submit button.

Experience this online

HTML disabled button example

Disabled button may be required in specific scenarios like in navigation (Next Back Last) reaching to last page and making Last button disabled. Example below shows how to disable a button in HTML.

Experience this online

Styling buttons with CSS

You can also apply power of CSS to make beautiful buttons that blend or contrast to rest of the content on your web page. You can use inline CSS properties in Style attribute of button or add CSS class/id for separately created CSS.

Following examples shows both ways of using style attribute as well as applying class to the button.

CSS button example with different CSS properties

The following example applies font size, color, height, width etc. and applies it by class name to buttons.

Experience this online

CSS button example with background image

The following example sets background image with CSS background-image property to HTML button.

Experience this online

A button example with style attribute of button

The following example shows same properties set in style attribute of buttons.

Experience this online

The following link shows more CSS buttons with CSS3 codes. You may also see creating buttons with Bootstrap framework here: Bootstrap buttons.