DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <button> Button Tag

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 and closing tag.


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

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

Download Sample File:

HTML-Button-tagDownload

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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:

Browser Support

Related Articles:

The post HTML Button Tag appeared first on Share Point Anchor.

Top comments (0)