HTML button tag

2024.10.04 11:29

Tutorials Exercises Certificates Services Menu Search field ×  Log in Sign Up ★ +1 My W3Schools Get Certified Spaces For Teachers Plus Get Certified Spaces For Teachers Plus My W3Schools Tutorials Exercises Certificates Services Spaces Get Certified Plus Academy Logout     ×

Tutorials

Tutorials filter input ×

HTML and CSS

Learn HTML Tutorial Reference Learn CSS Tutorial Reference Learn RWD Tutorial Learn Bootstrap Overview Learn W3.CSS Tutorial Reference Learn Sass Tutorial Reference Learn Colors Tutorial Reference Learn Icons Tutorial Reference Learn SVG Tutorial Reference Learn Canvas Tutorial Reference Learn Graphics Tutorial Learn Character Sets Reference Learn How To Tutorial

Data Analytics

Learn AI Tutorial Learn Generative AI Tutorial Learn ChatGPT-3.5 Tutorial Learn ChatGPT-4 Tutorial Learn Google Bard Tutorial Learn Machine Learning Tutorial Learn DSA Tutorial Learn Data Science Tutorial Learn NumPy Tutorial Learn Pandas Tutorial Learn SciPy Tutorial Learn Matplotlib Tutorial Learn Statistics Tutorial Learn Excel Tutorial Learn Google Sheets Tutorial

Web Building

Create a Website HOT! Create a Server NEW Where To Start Web Templates Web Statistics Web Certificates Web Development Code Editor Test Your Typing Speed Play a Code Game Cyber Security Accessibility Join our Newsletter

JavaScript

Learn JavaScript Tutorial Reference Learn React Tutorial Learn jQuery Tutorial Reference Learn Vue Tutorial Reference Learn AngularJS Tutorial Reference Learn JSON Tutorial Reference Learn AJAX Tutorial Learn AppML Tutorial Reference Learn W3.JS Tutorial Reference

Web Building

Create a Website HOT! Create a Server NEW Where To Start Web Templates Web Statistics Web Certificates Web Development Code Editor Test Your Typing Speed Play a Code Game Cyber Security Accessibility Join our Newsletter

Backend

Learn Python Tutorial Reference Learn SQL Tutorial Reference Learn MySQL Tutorial Reference Learn PHP Tutorial Reference Learn Java Tutorial Reference Learn C Tutorial Reference Learn C++ Tutorial Reference Learn C# Tutorial Learn R Tutorial Learn Kotlin Tutorial Learn Go Tutorial Learn Django Tutorial Reference Learn PostgreSQL Tutorial Learn TypeScript Tutorial Learn ASP Tutorial Reference Learn Node.js Tutorial Reference Learn Raspberry Pi Tutorial Learn Git Tutorial Learn MongoDB Tutorial Learn AWS Cloud Tutorial Learn XML Tutorial Reference

Data Analytics

Learn AI Tutorial Learn Generative AI Tutorial Learn ChatGPT-3.5 Tutorial Learn ChatGPT-4 Tutorial Learn Google Bard Tutorial Learn Machine Learning Tutorial Learn DSA Tutorial Learn Data Science Tutorial Learn NumPy Tutorial Learn Pandas Tutorial Learn SciPy Tutorial Learn Matplotlib Tutorial Learn Statistics Tutorial Learn Excel Tutorial Learn Google Sheets Tutorial

Web Building

Create a Website HOT! Create a Server NEW Where To Start Web Templates Web Statistics Web Certificates Web Development Code Editor Test Your Typing Speed Play a Code Game Cyber Security Accessibility Join our Newsletter
×

Exercises

Excercises filter input ×

HTML and CSS

HTML Exercise Quiz CSS Exercise Quiz Bootstrap 3 Exercise Quiz Bootstrap 4 Exercise Quiz Bootstrap 5 Exercise Quiz

Data Analytics

DSA Exercise Quiz NumPy Exercise Quiz Pandas Exercise Quiz SciPy Exercise Quiz Excel Exercise What is an Exercise? What is a Quiz?

JavaScript

JavaScript Exercise Quiz React Exercise Quiz jQuery Exercise Quiz Vue Exercise Quiz

Backend

Python Exercise Quiz SQL Exercise Quiz MySQL Exercise Quiz PHP Exercise Quiz Java Exercise Quiz C Exercise Quiz C++ Exercise Quiz C# Exercise Quiz R Exercise Quiz Kotlin Exercise Quiz Django Exercise Quiz PostgreSQL Exercise Quiz TypeScript Exercise Quiz Git Exercise Quiz Go Exercise MongoDB Exercise AWS Cloud Exercise Quiz

Data Analytics

DSA Exercise Quiz NumPy Exercise Quiz Pandas Exercise Quiz SciPy Exercise Quiz Excel Exercise What is an Exercise? What is a Quiz?
×

Certificates

Filter field for certifications ×

HTML and CSS

HTML Certificate Course CSS Certificate Course Bootstrap 3 Certificate Course Bootstrap 4 Certificate Course Bootstrap 5 Certificate

Data Analytics

DSA Certificate Data Analytics Course NumPy Certificate Course Pandas Certificate Course Excel Certificate Social Media Course What is a Certificate?

Programs

Full Access Best Value! Front End Certificate Course Web Dev. Certificate Course Web App Certificate Course Web Design Certificate Course

JavaScript

JavaScript Certificate Course React Certificate Course jQuery Certificate Course Vue Certificate

Programs

Full Access Best Value! Front End Certificate Course Web Dev. Certificate Course Web App Certificate Course Web Design Certificate Course

Programs

Full Access Best Value! Front End Certificate Course Web Dev. Certificate Course Web App Certificate Course Web Design Certificate Course

Backend

Python Certificate Course SQL Certificate Course MySQL Certificate PHP Certificate Course Java Certificate Course C Certificate C++ Certificate Course C# Certificate Course R Course Django Certificate TypeScript Certificate Course XML Certificate Course Cyber Security Certificate Course Accessibility Certificate Course Python Apps on AWS Course AWS Training Courses

Data Analytics

DSA Exam Data Analytics Course NumPy Course Pandas Course Excel Certificate Social Media Course What is a Certificate?
×

All Our Services

Services filter input ×

W3Schools offers a wide range of services and products for beginners and professionals,
helping millions of people everyday to learn and master new skills.

Free Tutorials

Enjoy our free tutorials like millions of other internet users since 1999

References

Explore our selection of references covering all popular coding languages

Create a Website

Create your own website with W3Schools Spaces - no setup required

Exercises

Test your skills with different exercises

Quizzes

Test yourself with multiple choice questions

Get Certified

Document your knowledge

Log in / Sign Up

Create a free W3Schools Account to Improve Your Learning Experience

Pathfinder & My Learning

Track your learning progress at W3Schools and collect rewards

Upgrade

Become a PLUS user and unlock powerful features (ad-free, hosting, support,..)

Where To Start

Not sure where you want to start? Follow our guided path

Code Editor (Try it)

With our online code editor, you can edit code and view the result in your browser

Videos

Learn the basics of HTML in a fun and engaging video tutorial

Templates

We have created a bunch of responsive website templates you can use - for free!

Web Hosting

Host your own website, and share it to the world with W3Schools Spaces

Create a Server

Create your own server using Python, PHP, React.js, Node.js, Java, C#, etc.

How To's

Large collection of code snippets for HTML, CSS and JavaScript

CSS Framework

Build fast and responsive sites using our free W3.CSS framework

Browser Statistics

Read long term trends of browser usage

Typing Speed

Test your typing speed

AWS Training

Learn Amazon Web Services

Color Picker

Use our color picker to find different RGB, HEX and HSL colors.

Code Game

W3Schools Coding Game! Help the lynx collect pine cones

Set Goal

Get personalized learning journey based on your current skills and goals

Newsletter

Join our newsletter and get access to exclusive content every month

For Teachers

Contact us about W3Schools Academy for educational institutions

For Businesses

Contact us about W3Schools Academy for your organization

Contact Us

About sales: sales@w3schools.com
About errors: help@w3schools.com

    × ❮ HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE ❯

HTML References

HTML by Alphabet HTML by Category HTML Browser Support HTML Attributes HTML Global Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Character Sets HTML Doctypes HTML URL Encode HTML Language Codes HTML Country Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML Tags

!-- !DOCTYPE a abbr acronym address applet area article aside audio b base basefont bdi bdo big blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 - h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noframes noscript object ol optgroup option output p param picture pre progress q rp rt ruby s samp script search section select small source span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr

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 get
post 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 hide
show
toggle 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 W3schools Pathfinder Track your progress - it's free! Log in Sign Up

COLOR PICKER

PLUS SPACES GET CERTIFIED FOR TEACHERS FOR BUSINESS CONTACT US ×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

Top Tutorials

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples

HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified

HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate
    FORUM ABOUT ACADEMY W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use , cookie and privacy policy .

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS .