HTML button is very important for any website, without it users can’t use functionalists of the website. With HTML Button Tag (Element) you can create a button. Another way is using the input tag to create a button.
Syntax:
<button name=”name”>
HTML button tag Example:-
Creating button in HTML very easy, just use <button> tag. Write a text (a test will show to users on the website) between open and close tags.
<!DOCTYPE html>
<html>
<body>
<button type="button">Click Me!</button>
</body>
</html>Output:
HTML button link
There are many ways to create a link in a button, Here is a simple way to do it. Use <a> tag then <button> tag. In anchor tag use the
<!DOCTYPE html>
<html>
<body>
<a href="http://Google.com"><button>Link Google</button></a>
</body>
</html>HTML button onclick | Event Attribute
OnClick is an event attribute, which runs a script when a button is clicked by the user. It instructs the browser to do the task on clicks a button.
<button onClick="script">Example of OnClick attribute in button element:-
Code:- onClick button function called “myFunction()” and the script will pop up an alert box.
<!DOCTYPE html>
<html>
<body>
<h3>The onclick Event</h3>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
alert("Hello World")
}
</script>
</body>
</html>Output:
HTML button size
You can change the size of button using CSS. See below example how to do it with inline CSS.
Note: You can’t be done with pure HTML/JS, you will need CSS.
<!DOCTYPE html>
<html>
<body>
<button style="height:200px;width:200px"> 200px button</button>
</body>
</html>Output:
HTML button background color & text color
You can Assigning background color and text-color to button in HTML suing CSS.
You need to keep all of your style properties in a single tag and separate them with semi-colons. Other ways are using the CSS class or ID.
See Below example code how to change the background color and test color of button in html.
<!DOCTYPE html>
<html>
<body>
<button style="color:yellow; background-color:blue;" type="button" >Click Me!</button>
</body>
</html>Output:
Q: How to create a radio button?
Answer: To create a radio button in HTML you have to use input tag:
<input type="radio">Read More: HTML Radio Button Example
Q: How to HTML button disabled?
Answer: To disable button in HTML use
<button disabled>Complete code:
<button type="button" disabled>Click Me!</button>
Do comment if you have any doubt and suggestions on this tutorial.
Note: The All Examples code of HTML button element is tested on the Safari browser (Version 12.0.2).
OS: macOS 10.14 Catalina
Code: HTML 5 Version