12 Demos of HTML buttons: Simple and CSS style

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”.

Example of HTML button onclick

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

Example of a button with double click

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

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.

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.

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.

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

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

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

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.

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.

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.

CSS button example with background image

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

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

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

Also see The <a> tag | HTML form

Was this article helpful?

Related Articles

Leave A Comment?