How To Create A Button

1. HTML button: Main Tips
2. Use and Purpose of button
3. Attributes for button
4. Browser support

HTML button: Main Tips

The HTML <button> element creates a clickable button, which can be put anywhere in the web page.
Browsers present this button according to the host platform. However, the appearance of HTML buttons can be changed with CSS.
<button> HTML is easier to style than the <input> since it accepts not only text value.

Use and Purpose of button

Learning how to make a button in HTML begins by learning the use of <button> element.

This code reveals how to make buttons by using the <button> element:

Example

                              <button                  style="background-color: blue;"                  type="button">                I am a blue button! Click me!                </button>

JavaScript adds functions to HTML buttons:

Example

                              <button                  type="button"                  onclick="alert('Hi user!')">Press me!</button>

One of the simplest ways of creating HTML button link is to repeat the following code:

Example

                              <p>This button transfers you to another website!</p>                <a                  href="http://bitdegree.org"                  target="_blank">                <button>Click me!</button>

Pros

Simplistic design (no unnecessary information)
High-quality courses (even the free ones)
Variety of features

Main Features

Nanodegree programs
Suitable for enterprises
Paid certificates of completion

Pros

Easy to navigate
No technical issues
Seems to care about its users

Main Features

Huge variety of courses
30-day refund policy
Free certificates of completion

Pros

Great user experience
Offers quality content
Very transparent with their pricing

Main Features

Free certificates of completion
Focused on data science skills
Flexible learning timetable

Attributes for button

autofocus

It sets focus after a web document loads.

Example

                              <button                  type="button"                  autofocus>Hello World!</button>

disabled

It defines a disabled button.

Example

                              <button                  type="submit"                  disabled>Register</button>

form

It defines a form ID to which the button is associated.

Example

                              <form                  action="http://www.bitdegree.org/"                  method="GET"                  id="Search">                Search Term:                <input                  type="text"                  name="search_query">                </form>                <button                  type="submit"                  form="Search">Search</button>

formaction

It sets the location for submitting the form data.

Example

                              <form                  action="https://www.bitdegree.org/learn/html-button/#ltbuttongt"                  method="GET">                Search Term:                <input                  type="text"                  name="q">                <button                  type="submit"                  formaction="https://www.google.com/search">Search</button>                </form>

formenctype

It sets the type of content applied to submit the form to the server.

Example

                              <form                  action="https://www.bitdegree.org/learn/best-code-editor/?example=27003"                  method="get">                Select Image:                <input                  type="file"                  name="uploaded_filename">                <button                  type="submit"                  formenctype="multipart/form-data">Upload</button>                </form>

formmethod

It sets the type of HTTP method.

Example

                              <form                  action="search"                  method="GET">                Search Term:                <input                  type="text"                  name="search_query">                <button                  type="submit"                  formmethod="get">Search</button>                </form>

formnovalidate

It sets no support for validation features.

Example

                              <form                  action="https://www.bitdegree.org/learn/best-code-editor/?example=27006"                  method="POST">                Name:                <input                  type="text"                  name="name">                Email ID:                <input                  type="text"                  name="email">                <button                  type="submit"                  formnovalidate>Search</button>                </form>

formtarget

It sets the target location for the web server response.

Example

                              <form                  action="https://www.bitdegree.org/learn/html-button/#ltbuttongt"                  method="GET">                Search Term:                <input                  type="text"                  name="search_query">                <button                  type="submit"                  formtarget="_blank">Search</button>                </form>

name

It defines the button name.

Example

                              <form                  action="search"                  method="GET">                Search Term:                <input                  type="text"                  name="search_query">                <button                  type="submit"                  name="search">Search</button>                </form>

type

It defines the type of button.

Example

                              <form                  action="search"                  method="GET">                Search Term:                <input                  type="text"                  name="search_query">                <button                  type="submit">Search</button>                </form>

value

It defines the value associated with the name submitted along with form data.

Example

                              <form                  action="search"                  method="GET">                Search Term:                <input                  type="text"                  name="search_query">                <input                  type="submit"                  value="Search">                <button                  type="submit"                  name="search"                  value="search_button">Search</button>                </form>

Browser support

Chrome

All

Edge

All

Firefox

All

IE

All

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

All

Opera

All

Safari

All