In HTML, the 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 tag to create similar buttons. It allows you to place the content inside the .
Estimated reading time: 6 minutes
Syntax:
The tag.
<button type="button">Download</button>
th, td{ padding: 20px; }
| HTML
Sample of the HTML
<!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:
Download Sample File:
Use CSS Property to Create Styles on
The appearance of HTML buttons can be change with the CSS properties.
Sample of the
<!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:
Use JavaScript to Create HTML
The tag simply creates an 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 type="button" onclick="alert('You pressed the button!')">Click me!</button>
Result:
Attributes:
The tag supports the global attributes and the event attributes.
th, td{ padding: 20px; }
| 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
You can use the following properties to style an HTML button tag.
Properties to style the visual weight/emphasis/size of the text in
- 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
- 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
- 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
- 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:
Related Articles:
The post HTML Button Tag appeared first on Share Point Anchor.
Top comments (0)