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.

Output:

HTML button link

There are many ways to create a link in button, Here is a simple way to do it. Use <a> tag then <button> tag. In anchor tag use href attribute and value of it your target website.

HTML button onclick | Event Attribute

OnClick is event attribute, which runs a script when a button is clicked by user. It’s instructs the browser to do task on clicks a button.

Example of OnClick attribute in button element:-

Code:- onClick button function called “myFunction()” and the script will pop up an alert box.

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.

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.

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:

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.

Complete code:

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.