HTML <button> Button Tag
Tags: learnhtml, htmlb
Published: 2021-02-15 08:37:46

---
title: HTML <button> Button Tag
published: true
date: 2021-02-15 07:05:08 UTC
tags: LearnHTML,HTMLB
canonical_url: https://sharepointanchor.com/learn-html/html-button-tag/
---

In [HTML](https://sharepointanchor.com/learn-html/ "HTML"), the **<button>**  **Button tag**  **creates a clickable button** , which can be put anywhere on the web page. These buttons are mainly used to submit forms or standard button functionality. You can change the buttons’ appearance with **CSS property**.

**Tips** : You can also use the **<input>** tag to create similar buttons. It allows you to **place the content inside the <button> tag**.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 6 minutes

## Syntax:

The <button> tag always comes in pairs. The content is written between the **opening <button> tag** and **closing </button> tag**.

```

<button type="button">Download</button>

```
<style> th, td{ padding: 20px; } </style>

| [HTML](https://sharepointanchor.com/learn-html/ "HTML") <button> tag | Helps to **create a clickable button** on the web page |
| Attribute | type=”button” |
| Start tag/ End tag | Both Start tag and End tag |
| Usage | Create button |

## Sample of the HTML<button> Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Document Title </title>
  </head>
  <body>
    <h2>HTML Button Tag:</h2>
<p>Here will be our clickable button</p>
    <button type="button">Click Here</button>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Btuuon-tag.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-Button-tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Button-tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Button-tag.html)

## Use CSS Property to Create Styles on <button> Tag:

The appearance of [HTML](https://sharepointanchor.com/learn-html/ "HTML") buttons can be change with the CSS properties.

### Sample of the <button> tag with CSS styles:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    Normal button:  
    <button type="button">Click Here</button>
    <br><br>
    This is the Button with blue text:  
    <button type="button" style="color: blue;"><b>Click Here</b></button>
   <br><br>
    This is the Button with increased font size:  
    <button type="button" style="font: bold 14px Arial;">Click here to Download</button>
  </body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Button-with-CSS-2.png)<figcaption>Result</figcaption>

## Use JavaScript to Create HTML <button> Tag:

The <buttton> tag simply creates an [HTML](https://sharepointanchor.com/learn-html/ "HTML") button. The text between the opening and closing tags will be appear as the text on the button. No action takes place by default when a button is clicked.

If the button wants to perform a certain task, that action must be added to the button using JavaScript or by associating the button with a form.

### JavaScript Code for <button> Tag:

```

<button type="button" onclick="alert('You pressed the button!')">Click me!</button>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/buton-Java.png)<figcaption>Result</figcaption>

## Attributes:

The  **<button>**  tag supports the  **global attributes**  and the  **event attributes**.

<style> th, td{ padding: 20px; } </style>

| Attributes | Value | Description |
| --- | --- | --- |
| autofocus | autofocus | This attribute specifies that the **button should receive focus after loading the page**. |
| disabled | disabled | It will **deactivate the button**. (Used when the button should become active after performing some action.) |
| form | form\_id | It defines **one or more forms the button** belongs to. If the button has multiple forms, then their identifiers (form\_id) must be separated by spaces. |
| formaction | URL | This attribute helps to **specify the address, where the form data will be sent after clicking on the button**. (Used only for the buttons with the **type=”submit”** attribute). |
| formenctype | | It helps to define how the **form-data should be encoded when a form is submitted**. (Used only for **type=”submit”** ). |
| application/x-www-form- | All symbols are **encoded before a form is submitted** (default value). |
| urlencoded | Symbols are **not encoded**. |
| multipart/form-data | **Spaces are being replaced by the sign “+”** , but symbols aren’t encoded. |
| text/plain | It specified as a debugging aid; **shouldn’t be used for real form submission**. |
| formmethod | | The formmethod attribute will **define the**  **method of the HTTP request** , which will be used when a form is submitted (only for **type=”submit”** ). |
| get | Helps to **pass the form data in the address bar** (“ **name = value** “), which are added to the URL of the page after the question mark and are separated by an ampersand (&). |
| post | The **browser communicates with the server** and sends the data for processing. |
| formnovalidate | formnovalidate | This attribute specifies that the **form-data should not be validated on submission** (only for **type=”submit”** ). |
| formtarget | | It defines, **where the response will be shown after the form is submitted** (only for **type=”submit”** ). |
| blank | Helps to **open the response** in a **new window**. |
| self | This attribute **opens the response** in the **current window**. |
| parent | This value will **open the response** in the **parent frame**. |
| top | It should **open the response** in the **full-width window**. |
| name | name | This attribute **defines the button name**. |
| type | | The type attribute specifies the **button type**. |
| button | It shows the **ordinary button** |
| reset | It creates the button, that **clears the form from the input data** |
| submit | This button used for **sending form data**. |
| value | text | This attribute defines the **button value**. |

## Styling Methods for <button> Tag:

You can use the following properties to style an [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") button tag.

### Properties to style the visual weight/emphasis/size of the text in <button> tag:

- **CSS font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in <button> Tag:

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for <button> Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for <button> Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <!– Comments –> Comments Tag](https://sharepointanchor.com/learn-html/html-comments-tag/)**
- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[CSS all Property](https://sharepointanchor.com/learn-css/css-all-property/)**
- **[HTML <blockquote> Blockquote Tag](https://sharepointanchor.com/learn-html/html-blockquote-blockquote-tag/)**

The post [HTML <code><button></code> Button Tag](https://sharepointanchor.com/learn-html/html-button-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).