Horje
What is HTML <button> Tag | HTML Tag Code
What is HTML <button> Tag

<button> Defines a clickable button.

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.


How to create HTML <button> Tag

A clickable button is marked up as follows:
index.html
Example: HTML
 <button type="button">Click Me!</button> 

Output should be:

How to create HTML <button> Tag

What Type of Browsers will Support for HTML <button> Tag

Following Browsers will support for HTML <button> Tag
What Type of Browsers will Support for HTML <button> Tag

Attributes for HTML <button> Tag

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

How to Use CSS to style buttons

Follow the Example
index.html
Example: HTML
 <!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> 

Output should be:

How to Use CSS to style buttons

How to Use CSS to style buttons (with hover effect)

Follow the Example.

The button element - Styled with CSS

Use the :hover selector to change the style of the button when you move the mouse over it.
Tip: Use the transition-duration property to determine the speed of the "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> 

Output should be:

How to Use CSS to style buttons (with hover effect)




Read Full::
HTML Tag Code
Category:
HTML Code
Sub Category:
HTML Tag Code
Uploaded:
1 month ago
Uploaded by:
Admin
Views:
1

Related Articles
What is HTML <!--...--> Tag HTML Tag Code
What is HTML <!DOCTYPE> Declaration HTML Tag Code
What is HTML Elements and Doctypes HTML Tag Code
What is HTML <a> Tag HTML Tag Code
What is HTML <abbr> Tag HTML Tag Code
What is HTML <address> Tag HTML Tag Code
What is HTML <applet> Tag HTML Tag Code
What is HTML <area> Tag HTML Tag Code
What is HTML <article> Tag HTML Tag Code
What is HTML <aside> Tag HTML Tag Code
What is HTML <audio> Tag HTML Tag Code
What is HTML <b> Tag HTML Tag Code
What is HTML <base> Tag HTML Tag Code
What is HTML <basefont> Tag HTML Tag Code
What is HTML <bdi> Tag HTML Tag Code
What is HTML <bdo> Tag HTML Tag Code
What is HTML <big> Tag HTML Tag Code
What is HTML <blockquote> Tag HTML Tag Code
What is HTML <body> Tag HTML Tag Code
What is HTML <br> Tag HTML Tag Code
What is HTML <button> Tag HTML Tag Code
What is HTML <canvas> Tag HTML Tag Code
What is HTML <caption> Tag HTML Tag Code
What is HTML <center> Tag HTML Tag Code
What is HTML <cite> Tag HTML Tag Code
What is HTML <code> Tag HTML Tag Code
What is HTML <col> Tag HTML Tag Code
How to create HTML <colgroup> Tag HTML Tag Code
What is HTML <data> Tag HTML Tag Code
What is HTML <datalist> Tag HTML Tag Code
What is HTML <dd> Tag HTML Tag Code
What is HTML <del> Tag HTML Tag Code
What is HTML <details> Tag HTML Tag Code
What is HTML <dfn> Tag HTML Tag Code
What is HTML <dialog> Tag HTML Tag Code
What is HTML <dir> Tag HTML Tag Code
What is HTML <div> Tag HTML Tag Code
What is HTML <dl> Tag HTML Tag Code
What is HTML <dt> Tag HTML Tag Code
What is HTML <em> Tag HTML Tag Code
What is HTML <embed> Tag HTML Tag Code
What is HTML <fieldset> Tag HTML Tag Code
What is HTML <figcaption> Tag HTML Tag Code
What is HTML <figure> Tag HTML Tag Code
What is HTML <font> Tag HTML Tag Code
What is HTML <footer> Tag HTML Tag Code
What is HTML <form> Tag HTML Tag Code
What is HTML <frame> Tag HTML Tag Code
What is HTML <frameset> Tag HTML Tag Code
What is HTML <h1> to <h6> Tags HTML Tag Code
What is HTML <head> Tag HTML Tag Code
What is HTML <header> Tag HTML Tag Code
What is HTML <hgroup> Tag HTML Tag Code
What is HTML <hr> Tag HTML Tag Code
What is HTML <html> Tag HTML Tag Code
What is HTML <i> Tag HTML Tag Code
What is HTML <iframe> Tag HTML Tag Code
What is HTML <img> Tag HTML Tag Code

Single Articles
How to create HTML <button> Tag
What Type of Browsers will Support for HTML <button> Tag
Attributes for HTML <button> Tag
How to Use CSS to style buttons
How to Use CSS to style buttons (with hover effect)

Share on: