HTML button tag | link, onClick, style, color, size, Code example

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.

HTML button tag | link, onClick, style, color, size, Code example

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 href attribute and value of it your target website.

<!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 onclick Event Attribute

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 size

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:

HTML button background color & text color

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 disabled attribute. Where a disabled attribute is a Boolean attribute.

<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


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.