- \n
- A basic example of a HTML button\u00a0<\/a><\/li>\n
- The onclick attribute<\/a><\/li>\n
- Button size<\/a><\/li>\n
- Button type<\/a><\/li>\n
- Styling buttons<\/a><\/li>\n
- Submit HTML button<\/a><\/li>\n
- Disabling a button<\/a><\/li>\n
- Buttons with bootstrap<\/a><\/li>\n
- Conclusion<\/a><\/li>\n<\/ul>\n
<\/p>\n
A basic example of an HTML button<\/h3>\n
The following code is a basic button.<\/p>\n
<html>\r\n<body>\r\n<p> this is a simple button <\/p>\r\n<button type=\"button\">Click<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b0.png\")
<\/p>\nLike all other tags, the button tag<\/a> is also placed inside the body tag. Button tag has one opening tag and one closing tag. The type of button is defined by using the type attribute. There are three values for the type attribute, button, submit and reset. However, submit and reset are used while creating a form<\/a>. The text written between the tags appears on the button.
\n<\/a><\/p>\nonclick attribute<\/h3>\n
We used a button tag to create a button. But what happens when this button is clicked? absolutely nothing. To make this button work, We can use the onclick attribute of the button tag.<\/p>\n
<html> \r\n<body> \r\n<button type=\"button\" onclick=\"alert('Hello world!')\">Click<\/button> \r\n<\/body> \r\n<\/html><\/pre>\nIn the above example, whenever a user clicks the button, an alert message appears. In the place of an alert message, we can also place a javascript function<\/a>. We can decide what to do in this javascript function.<\/p>\n
Before clicking the button.<\/p>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b1.png\")
<\/p>\nAfter the button is clicked, an alert message with “Hello world!” appears on the screen.<\/p>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b2-1.png\")
<\/p>\nonclick attribute can also be used with the button tag to make it work as a link<\/a>. The following code has a button. When clicked, it opens the homepage of google.<\/p>\n
<html> \r\n<body> \r\n<button type=\"button\" onclick=\"window.location.href = 'https:\/\/www.google.com\/';\">Click<\/button> \r\n<\/body> \r\n<\/html><\/pre>\n
<\/p>\n
Button size<\/h3>\n
In the above examples, we can see a normal-sized button. There are few ways of increasing the button size. We can use the font-size property of CSS to increase the size of the button, or we can also use the padding property of CSS. The following example uses the font-size property to increase the size of the button.<\/p>\n
<html>\r\n<body>\r\n<button type=\"button\" style=\"font-size: 20px\">Click<\/button>\r\n<\/body>\r\n<\/html><\/pre>\n
As you can see, the font-size is given twenty pixels. This will increase the size of the button according to the size of the text written inside the button.<\/p>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b3.png\")
<\/p>\nAnother way is to use the padding property.<\/p>\n
<html>\r\n<body>\r\n<button type=\"button\" style=\"padding: 20px\">Click<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Here, We have set the padding to twenty pixels. Space between the text and the walls of the button will be twenty pixels.<\/p>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b4.png\")
<\/h4>\n<\/p>\n
Button type<\/h3>\n
As I mentioned earlier, there are three values we can give to the type attribute of the button.<\/p>\n
1.Button: When we want to use a standard button, we have to give “button” as the value of type attribute.<\/p>\n
2. Submit: The HTML form tag<\/a> has data inside it. We use the type as “submit” to submit the form-data. URL entered in the action attribute of form tag is the place where data is submitted. The following code has a form with submit button.<\/p>\n
<html>\r\n<body>\r\n<form action=\"\/action_page.php\" method=\"get\" id=\"nameform\">\r\n First name: <input type=\"text\" name=\"fname\"><br>\r\n Last name: <input type=\"text\" name=\"lname\"><br>\r\n<\/form>\r\n<button type=\"submit\" form=\"nameform\" value=\"Submit\">Submit<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
3. Reset: We can also reset the data of a form to its initial values. To do this, “reset” is given as the value of type attribute. The following code has initial values in input fields. We can change the values and then press the reset button to get the initial values inside the input fields. The following code has a form with a reset button.<\/p>\n
<html> \r\n<body> \r\n<form action=\"\/action_page.php\" method=\"get\" id=\"nameform\">\r\nFirst name: <input type=\"text\" name=\"fname\" value=\"john\"><br> \r\nLast name: <input type=\"text\" name=\"lname\" value=\"potter\"><br> \r\n<\/form> \r\n<button type=\"reset\" form=\"nameform\" >Reset<\/button>\r\n<\/body> \r\n<\/html><\/pre>\n
<\/p>\n
Styling buttons<\/h3>\n
A normal HTML button looks dull. But CSS provides many options to style a button. We can change the color<\/a>, font size, border color, border-radius, etc, of buttons using CSS. I will explain some ways of making a button look better.<\/p>\n
The color of the button can be changed using the background-color property of CSS. The following code shows three buttons with three different colors.<\/p>\n
<html>\r\n<body>\r\n<button type=\"button\" style=\"background-color: green; font-size: 50px\">Green<\/button>\r\n<button type=\"button\" style=\"background-color: blue; font-size: 50px\">Blue<\/button>\r\n<button type=\"button\" style=\"background-color: red; font-size: 50px\">Red<\/button>\r\n<\/body>\r\n<\/html><\/pre>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b5.png\")
<\/p>\nWe can use the border attribute of CSS to specify the size, style, and color of a button. The following code shows three buttons with three different border colors.<\/p>\n
<html>\r\n<body>\r\n<button type=\"button\" style=\"border: 5px solid green; font-size: 50px\">Green<\/button>\r\n<button type=\"button\" style=\"border: 5px solid blue; font-size: 50px\">Blue<\/button>\r\n<button type=\"button\" style=\"border: 5px solid red; font-size: 50px\">Red<\/button>\r\n<\/body>\r\n<\/html><\/pre>\n
Observe the value given in the border property carefully. “5px” defines the size of border. Solid is the style, followed by the color of the border. Instead of solid, there are also few other options for border style, like dotted, dashed, groove, etc.<\/p>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b6.png\")
<\/p>\nUsually, a button has a sharp corner. We can make these corner rounded by using the border-radius property of CSS. The following code shows three buttons with rounded corners.<\/p>\n
<html>\r\n<body>\r\n<button type=\"button\" style=\"border: 5px solid green;border-radius: 20px;font-size: 50px\">Green<\/button>\r\n<button type=\"button\" style=\"border: 5px solid blue;border-radius: 20px; font-size: 50px\">Blue<\/button>\r\n<button type=\"button\" style=\"border: 5px solid red;border-radius: 20px; font-size: 50px\">Red<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b7.png\")
<\/h4>\n<\/p>\n
Action<\/h3>\n
Action is an attribute of the form tag in HTML<\/a>. The action attribute specifies where to send the form data. To use the action attribute, the type of the button should be “submit”.<\/p>\n
The following code creates<\/a> a form with two input fields and a submit button. The value of the action attribute should be the URL where the data is to be sent.<\/p>\n
<html>\r\n<body>\r\n<form action=\"\/action_page.php\">\r\nFirst name: <input type=\"text\" name=\"FirstName\" value=\"Mickey\"><br>\r\nLast name: <input type=\"text\" name=\"LastName\" value=\"Mouse\"><br>\r\n<button type=\"submit\">Submit<\/button>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b8.png\")
<\/h4>\n<\/p>\n
Disabling a button<\/h3>\n
A button is always active by default. This means, all the time it is clickable. We can make a button non-clickable by using the disabled attribute of the button tag. The disabled attribute is a boolean attribute. The following code shows two buttons, one which is clickable and the second one which is not clickable.<\/p>\n
<html>\r\n<body>\r\n<p> this button is clickable <\/p>\r\n<button type=\"button\">Click Me!<\/button>\r\n<p> this button is not clickable <\/p>a\r\n<button type=\"button\" disabled>Click Me!<\/button>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b9.png\")
<\/h4>\n<\/p>\n
Buttons with bootstrap<\/h3>\n
- The onclick attribute<\/a><\/li>\n
![\"\"](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b10.png\")
<\/p>\n![\"html](\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/b11.png\")