HTML Button Tag - W3Schools

Trang chủ » Html Button Properties Style » HTML Button Tag - W3Schools

Có thể bạn quan tâm

HTML <button> Tag ❮ Previous Complete HTML Reference Next ❯

Example

A clickable button is marked up as follows:

<button type="button">Click Me!</button> Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The <button> tag defines a clickable button.

Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!

Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.

Tip: You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.

Browser Support

Element
<button> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
autofocus autofocus Specifies that a button should automatically get focus when the page loads
disabled disabled Specifies that a button should be disabled
form form_id Specifies which form the button belongs to
formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit"
formenctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how form-data should be encoded before sending it to a server. Only for type="submit"
formmethod getpost Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
formnovalidate formnovalidate Specifies that the form-data should not be validated on submission. Only for type="submit"
formtarget _blank _self _parent _top framename Specifies where to display the response after submitting the form. Only for type="submit"
popovertarget element_id Specifies a which popover element to invoke
popovertargetaction hideshowtoggle Specifies what happens to the popover element when the button is clicked
name name Specifies a name for the button
type button reset submit Specifies the type of button
value text Specifies an initial value for the button

Global Attributes

The <button> tag also supports the Global Attributes in HTML.

Event Attributes

The <button> tag also supports the Event Attributes in HTML.

More Examples

Example

Use CSS to style buttons:

<!DOCTYPE html><html><head><style>.button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}.button1 {background-color: #04AA6D;} /* Green */.button2 {background-color: #008CBA;} /* Blue */ </style></head><body><button class="button button1">Green</button><button class="button button2">Blue</button></body></html> Try it Yourself »

Example

Use CSS to style buttons (with hover effect):

<!DOCTYPE html><html><head><style>.button { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer;}.button1 { background-color: white; color: black; border: 2px solid #04AA6D;}.button1:hover { background-color: #04AA6D; color: white;}.button2 { background-color: white; color: black; border: 2px solid #008CBA;}.button2:hover { background-color: #008CBA; color: white;}</style></head><body> <button class="button button1">Green</button><button class="button button2">Blue</button> </body></html> Try it Yourself »

Related Pages

HTML DOM reference: Button Object

CSS Tutorial: Styling Buttons

Default CSS Settings

None.

❮ Previous Complete HTML Reference Next ❯ ★ +1 Track your progress - it's free! Log in Sign Up

Từ khóa » Html Button Properties Style