{"id":79937,"date":"2020-07-27T19:02:18","date_gmt":"2020-07-27T13:32:18","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=79937"},"modified":"2024-07-24T16:26:23","modified_gmt":"2024-07-24T10:56:23","slug":"html-button-tag","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-button-tag\/","title":{"rendered":"HTML Button Tag – Types, Effects and Attributes"},"content":{"rendered":"

In this article, we are going to learn HTML Button Tags. So let’s start!!!<\/p>\n

\"HTML<\/a><\/p>\n

HTML Button<\/h2>\n

The <button> tag of HTML is used to create a clickable button. The button can contain text and other tags such as <strong>, <i>, <br>, <img>, etc. Such provisions are not given by a button created using the <input> element. The appearance of the button can be changed and manipulated using the CSS3 properties. A button consists of various attributes that tell the browser about its course of action, right from clicking.<\/p>\n

A major flexibility of HTML buttons is the factor that they can contain icons too. So with the use of icons enclosed into buttons, the application interface is more visually and cognitively attractive. This is especially important in web applications where the space is a constraint or in cases where the button\u2019s purpose can be further explained by the context provided through such images. You can use <i> or <img> tags to include icons into your button.<\/p>\n

Syntax-<\/strong> <button type= \u201c \u201d>Content <\/button><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<h1>The Button Element<\/h1>\r\n<button type=\"button\" onclick=\"alert('Welcome to DataFlair')\">Click Me<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
HTML Button Attributes<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Attribute<\/b><\/td>\nValue<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
autofocus<\/span><\/td>\nautofocus<\/span><\/td>\nSpecifies that a button should automatically get focus as soon as the page loads.<\/span><\/td>\n<\/tr>\n
disabled<\/span><\/td>\ndisabled<\/span><\/td>\nSpecifies that a button should be disabled.<\/span><\/td>\n<\/tr>\n
form<\/span><\/td>\nform_id<\/span><\/i><\/td>\nSpecifies the form to which the button belongs.<\/span><\/td>\n<\/tr>\n
formaction<\/span><\/td>\nURL<\/span><\/i><\/td>\nSpecifies where to send the data of the form when it is submitted. Only for type=”submit”.<\/span><\/td>\n<\/tr>\n
formenctype<\/span><\/td>\napplication\/x-www-form-urlencoded<\/span><\/p>\n
multipart\/form-data<\/span><\/p>\n
text\/plain<\/span><\/td>\n
Specifies how form-data should be encoded, before sending it to a server. (Only for type=”submit”)<\/span><\/td>\n<\/tr>\n
formmethod<\/span><\/td>\nget<\/span><\/p>\n
post<\/span><\/td>\n
Specifies how to send the form-data i.e. HTTP method, only for type=”submit”<\/span><\/td>\n<\/tr>\n
formnovalidate<\/span><\/td>\nformnovalidate<\/span><\/td>\nSpecifies that the form-data should not be validated, on submission. Only for type=”submit”<\/span><\/td>\n<\/tr>\n
formtarget<\/span><\/td>\n_blank<\/span><\/p>\n
_self<\/span><\/p>\n
_parent<\/span><\/p>\n
_top<\/span><\/p>\n
framename<\/span><\/i><\/td>\n
Specifies where to display the response after the submission of the form.<\/span><\/td>\n<\/tr>\n
name<\/span><\/td>\nname<\/span><\/i><\/td>\nSpecifies a name for the button.<\/span><\/td>\n<\/tr>\n
type<\/span><\/td>\nbutton<\/span><\/p>\n
reset<\/span><\/p>\n
submit<\/span><\/td>\n
Specifies the type of button.<\/span><\/td>\n<\/tr>\n
value<\/span><\/td>\ntext<\/span><\/td>\nSpecifies an initial value for the button that will be displayed.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
HTML buttons also support global and event attributes.<\/p>\n
Styling of Buttons in HTML<\/h2>\n
We can use CSS3 to style the button. The following are some examples.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  border: none;\r\n  color: white;\r\n  padding: 15px 32px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  margin: 4px 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n.button1 {background-color: pink;} \r\n.button2 {background-color: blue;} \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Styling of button element with CSS<\/h1>\r\n<p>Changing the background color of a button with the background-color property<\/p>\r\n<button class=\"button button1\">DataFlair<\/button>\r\n<button class=\"button button2\">DataFlair<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"css<\/a><\/p>\n
Here is another example where we will display the hovering effect on the button.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  border: none;\r\n  color: white;\r\n  padding: 16px 32px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  margin: 4px 2px;\r\n  transition-duration: 0.4s;\r\n  cursor: pointer;\r\n}\r\n\r\n.button1 {\r\n  background-color: white; \r\n  color: black; \r\n  border: 2px solid #4CAF50;\r\n}\r\n\r\n.button1:hover {\r\n  background-color: #4CAF50;\r\n  color: white;\r\n}\r\n\r\n.button2 {\r\n  background-color: white; \r\n  color: black; \r\n  border: 2px solid #008CBA;\r\n}\r\n\r\n.button2:hover {\r\n  background-color: #008CBA;\r\n  color: white;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>Style button element using CSS<\/h1>\r\n<p>Use the :hover selector to change the style of the button when mouse is moved over it.<\/p>\r\n<p>Use the transition-duration property to determine the speed of the hover effect<\/p>\r\n<button class=\"button button1\">DataFlair<\/button>\r\n<button class=\"button button2\">DataFlair<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"css<\/a><\/p>\n
Use of Border-Radius Property<\/h3>\n
We can use the border-radius property to create round buttons.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  background-color: blue;\r\n  border: none;\r\n  color: white;\r\n  padding: 20px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  margin: 4px 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n.button1 {border-radius: 2px;}\r\n.button2 {border-radius: 4px;}\r\n.button3 {border-radius: 8px;}\r\n.button4 {border-radius: 12px;}\r\n.button5 {border-radius: 50%;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Rounded Buttons<\/h2>\r\n<p>Add rounded corners to a button<\/p>\r\n<button class=\"button button1\">2px<\/button>\r\n<button class=\"button button2\">4px<\/button>\r\n<button class=\"button button3\">8px<\/button>\r\n<button class=\"button button4\">12px<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
HTML Shadow Buttons<\/h3>\n
We can enhance the buttons using the shadow effect<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  background-color: blue;\r\n  border: none;\r\n  color: white;\r\n  padding: 15px 32px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  margin: 4px 2px;\r\n  cursor: pointer;\r\n  -webkit-transition-duration: 0.4s; \r\n  transition-duration: 0.4s;\r\n}\r\n.button1 {\r\n  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>Shadow Buttons<\/h2>\r\n<p>Use the box-shadow property<\/p>\r\n<button class=\"button button1\">Shadow Button<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
HTML Disabled Buttons<\/h3>\n
We can also create disabled buttons.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  background-color: blue;\r\n  border: none;\r\n  color: white;\r\n  padding: 15px 32px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  margin: 4px 2px;\r\n  cursor: pointer;\r\n}\r\n.disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Disabled Buttons<\/h2>\r\n<p>Use the opacity property.<\/p>\r\n<button class=\"button\">Normal Button<\/button>\r\n<button class=\"button disabled\">Disabled Button<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
HTML Animated Button<\/h3>\n
We can also add animated hovering effects to buttons.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  display: inline-block;\r\n  border-radius: 4px;\r\n  background-color: pink;\r\n  border: none;\r\n  color: #FFFFFF;\r\n  text-align: center;\r\n  font-size: 28px;\r\n  padding: 20px;\r\n  width: 200px;\r\n  transition: all 0.5s;\r\n  cursor: pointer;\r\n  margin: 5px;\r\n}\r\n\r\n.button span {\r\n  cursor: pointer;\r\n  display: inline-block;\r\n  position: relative;\r\n  transition: 0.5s;\r\n}\r\n\r\n.button span:after {\r\n  content: '\\00bb';\r\n  position: absolute;\r\n  opacity: 0;\r\n  top: 0;\r\n  right: -20px;\r\n  transition: 0.5s;\r\n}\r\n\r\n.button:hover span {\r\n  padding-right: 25px;\r\n}\r\n\r\n.button:hover span:after {\r\n  opacity: 1;\r\n  right: 0;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>Animated Button<\/h2>\r\n<button class=\"button\" style=\"vertical-align:middle\"><span>Hover<\/span><\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
HTML Button-Width Property<\/h3>\n
We can set the width of a button using CSS.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  border: none;\r\n  color: white;\r\n  padding: 15px 32px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  margin: 4px 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n.button1 {width: 250px;background-color: blue;}\r\n.button2 {width: 50%;background-color: pink;}\r\n.button3 {width: 100%;background-color: purple;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Button Width<\/h2>\r\n<p>Use the width property to change the width of the button:<\/p>\r\n<p><strong>Tip:<\/strong> Use pixels for a fixed width and percent for responsive buttons<\/p>\r\n\r\n<button class=\"button button1\">300px<\/button><br>\r\n<button class=\"button button2\">60%<\/button><br>\r\n<button class=\"button button3\">100%<\/button>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
HTML Button Groups<\/h3>\n
We can create button groups and add borders to them using CSS.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.btn-group .button {\r\n  background-color: blue;\r\n  border: 1px solid black;\r\n  color: white;\r\n  padding: 15px 32px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  cursor: pointer;\r\n  float: left;\r\n}\r\n\r\n.btn-group .button:not(:last-child) {\r\n  border-right: none; \/* to prevent double borders *\/\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>Button Group<\/h2>\r\n<p>We can add borders to create a bordered button group:<\/p>\r\n\r\n<div class=\"btn-group\">\r\n  <button class=\"button\">Button<\/button>\r\n  <button class=\"button\">Button<\/button>\r\n  <button class=\"button\">Button<\/button>\r\n  <button class=\"button\">Button<\/button>\r\n<\/div>\r\n\r\n<p style=\"clear:both\"><br>It is important to clear floats after, or else will the p element will also float next to the buttons.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
We can also create vertical button groups.<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.btn-group .button {\r\n  background-color: pink;\r\n  border: 2px solid black;\r\n  padding: 15px 32px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  font-size: 16px;\r\n  cursor: pointer;\r\n  width: 150px;\r\n  display: block;\r\n}\r\n\r\n.btn-group .button:not(:last-child) {\r\n  border-bottom: none; \/* to prevent double borders *\/\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Vertical Button Group<\/h2>\r\n\r\n<div class=\"btn-group\">\r\n  <button class=\"button\">Button1<\/button>\r\n  <button class=\"button\">Button2<\/button>\r\n  <button class=\"button\">Button3<\/button>\r\n  <button class=\"button\">Button4<\/button>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"\"<\/a><\/p>\n
HTML Button on an Image<\/h3>\n
We can add a button on an image using CSS.<\/p>\n
<head>\r\n<style>\r\n.container {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 400px;\r\n}\r\n\r\n.container img {\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n\r\n.container .btn {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  -ms-transform: translate(-50%, -50%);\r\n  background-color: #f1f1f1;\r\n  color: black;\r\n  font-size: 16px;\r\n  padding: 16px 30px;\r\n  border: none;\r\n  cursor: pointer;\r\n  border-radius: 5px;\r\n  text-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>Button on Image<\/h2>\r\n<div class=\"container\">\r\n  <img src=\"images\/tree.jpg\" alt=\"Tree\" style=\"width:100%\">\r\n  <button class=\"btn\">Button<\/button>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"\"<\/a><\/p>\n
Effects on HTML Buttons<\/h2>\n
We can create certain animated effects on the buttons using CSS.<\/p>\n
1. Pressed Effect<\/h3>\n
<html>\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  display: inline-block;\r\n  padding: 15px 25px;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  outline: none;\r\n  color: #fff;\r\n  background-color: #4CAF50;\r\n  border: none;\r\n  border-radius: 15px;\r\n  box-shadow: 0 9px #999;\r\n}\r\n.button:hover {background-color: #3e8e41}\r\n.button:active {\r\n  background-color: #3e8e41;\r\n  box-shadow: 0 5px #666;\r\n  transform: translateY(4px);\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>Pressed Effect<\/h2>\r\n<button class=\"button\">Click Please<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
2. Fade-in effect<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\n.button {\r\n  background-color: blue;\r\n  border: none;\r\n  color: white;\r\n  padding: 16px 32px;\r\n  text-align: center;\r\n  font-size: 16px;\r\n  margin: 4px 2px;\r\n  opacity: 0.6;\r\n  transition: 0.3s;\r\n  display: inline-block;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n}\r\n\r\n.button:hover {opacity: 1}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Fade-in Effect<\/h2>\r\n\r\n<button class=\"button\">Hover<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
3. Ripple Effect<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.button {\r\n  position: relative;\r\n  background-color:pink;\r\n  border: none;\r\n  font-size: 28px;\r\n  padding: 20px;\r\n  width: 200px;\r\n  text-align: center;\r\n  transition-duration: 0.4s;\r\n  text-decoration: none;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n}\r\n\r\n.button:after {\r\n  content: \"\";\r\n  background: #f1f1f1;\r\n  display: block;\r\n  position: absolute;\r\n  padding-top: 300%;\r\n  padding-left: 350%;\r\n  margin-left: -20px !important;\r\n  margin-top: -120%;\r\n  opacity: 0;\r\n  transition: all 0.8s\r\n}\r\n\r\n.button:active:after {\r\n  padding: 0;\r\n  margin: 0;\r\n  opacity: 1;\r\n  transition: 0s\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Ripple Effect<\/h2>\r\n\r\n<button class=\"button\">Click on me<\/button>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
JavaScript on Buttons<\/h2>\n
We can incorporate javascript on buttons for validation. This can be used within forms for successful validation of information provided by the user.<\/p>\n
<!DOCTYPE>\r\n<html>  \r\n<body>  \r\n<button name=\"button\" value=\"okay\" type=\"button\" onclick=\"Hello()\">Click Here<\/button>  \r\n<script>  \r\nfunction Hello(){  \r\nalert(\"Welcome to DataFlair\");  \r\n}  \r\n<\/script>  \r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"\"<\/a><\/p>\n
Text Buttons<\/h3>\n
To create text buttons, we remove the border and background-color.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\n.btn {\r\n  border: none;\r\n  background-color: inherit;\r\n  padding: 14px 28px;\r\n  font-size: 16px;\r\n  cursor: pointer;\r\n  display: inline-block;\r\n}\r\n.success {\r\n  color: #ff00ff;\r\n}\r\n\r\n.success:hover {\r\n  background-color: #4CAF50;\r\n  color: white;\r\n}\r\n\r\n.info {\r\n  color: dodgerblue;\r\n}\r\n\r\n.info:hover {\r\n  background: #2196F3;\r\n  color: white;\r\n}\r\n\r\n.warning {\r\n  color: #ff3300;\r\n}\r\n\r\n.warning:hover {\r\n  background: #ff9800;\r\n  color: white;\r\n}\r\n\r\n.danger {\r\n  color: red;\r\n}\r\n\r\n.danger:hover {\r\n  background: #f44336;\r\n  color: white;\r\n}\r\n\r\n.default {\r\n  color: black;\r\n}\r\n\r\n.default:hover {\r\n  background: #e7e7e7;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Text Buttons<\/h2>\r\n<button class=\"btn success\">Success<\/button>\r\n<button class=\"btn info\">Info<\/button>\r\n<button class=\"btn warning\">Warning<\/button>\r\n<button class=\"btn danger\">Danger<\/button>\r\n<button class=\"btn default\">Default<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
Summary<\/h2>\n
In this article, we discussed the HTML button tag. It helps to create standard buttons in an HTML document. We looked at its attributes and how it can be used at ease as compared to the input tag. We\u2019ve also discussed the manipulation of HTML buttons using CSS3- background-color property hovering effect, border-radius property, shadow buttons, disabled buttons, animated buttons, button-width, button groups, button on an image and animated effects on buttons and use of javascript on buttons and text buttons.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this article, we are going to learn HTML Button Tags. So let’s start!!! HTML Button The <button> tag of HTML is used to create a clickable button. The button can contain text and...<\/p>\n","protected":false},"author":10,"featured_media":79947,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[22809,22811,22812,22810],"class_list":["post-79937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html-button","tag-html-button-attributes","tag-html-button-element","tag-html-button-tags"],"yoast_head":"\nHTML Button Tag - Types, Effects and Attributes - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn about HTML Button & various effects on these buttons like ripple, fade-in & pressed. Learn types of HTML buttons - shaded button, animated button etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/html-button-tag\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Button Tag - Types, Effects and Attributes - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn about HTML Button & various effects on these buttons like ripple, fade-in & pressed. Learn types of HTML buttons - shaded button, animated button etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-button-tag\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-27T13:32:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-24T10:56:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Button-DF.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Button Tag - Types, Effects and Attributes - DataFlair","description":"Learn about HTML Button & various effects on these buttons like ripple, fade-in & pressed. Learn types of HTML buttons - shaded button, animated button etc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/html-button-tag\/","og_locale":"en_US","og_type":"article","og_title":"HTML Button Tag - Types, Effects and Attributes - DataFlair","og_description":"Learn about HTML Button & various effects on these buttons like ripple, fade-in & pressed. Learn types of HTML buttons - shaded button, animated button etc.","og_url":"https:\/\/data-flair.training\/blogs\/html-button-tag\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-07-27T13:32:18+00:00","article_modified_time":"2024-07-24T10:56:23+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Button-DF.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML Button Tag – Types, Effects and Attributes","datePublished":"2020-07-27T13:32:18+00:00","dateModified":"2024-07-24T10:56:23+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/"},"wordCount":661,"commentCount":1,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Button-DF.jpg","keywords":["html button","html button attributes","html button element","html button tags"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-button-tag\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/","url":"https:\/\/data-flair.training\/blogs\/html-button-tag\/","name":"HTML Button Tag - Types, Effects and Attributes - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Button-DF.jpg","datePublished":"2020-07-27T13:32:18+00:00","dateModified":"2024-07-24T10:56:23+00:00","description":"Learn about HTML Button & various effects on these buttons like ripple, fade-in & pressed. Learn types of HTML buttons - shaded button, animated button etc.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-button-tag\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Button-DF.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Button-DF.jpg","width":1200,"height":628,"caption":"HTML Button"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-button-tag\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"HTML Button Tag – Types, Effects and Attributes"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/79937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=79937"}],"version-history":[{"count":3,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/79937\/revisions"}],"predecessor-version":[{"id":142868,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/79937\/revisions\/142868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/79947"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=79937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=79937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=79937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}