HTML Input Button onClick | Link, Disabled, Image and CSS

The button is playing a very important role in a web application. Such as a filled form, sign in, sing up, etc. Every place where the action required from users needed a Button. In Html, you can use the button with 2 ways- <input> tag and <button> tag. This tutorial, we will learn about HTML Input Button and see it’s examples.

HTML Input Button onClick Link, Disabled, Image and CSS


It’s easy to use, just write <input> tag and type=”button”. Here is a simple HTML Input Type Button syntax.

Example | How to use

See below example HTML Input Button text. It’s using the same <input> tag as an earlier tutorial – Input text box, Radio button, Checkbox.

Output: See below simple button example screenshot.

HTML Input Button Example output

Event | HTML Input Button onClick

When the user wants to take action that time onClick methods work. It will either hit to the server or any javascript. This HTML Input Button onClick Example we will look at how to perform javascript function.

Output: See below GIF image how it looks.

HTML Input Button onClick example output

Value | Get

In the HTML input type button, the value attribute will show to the user. Whatever you will write on value=” Click…etc”, the same content shows to the user. See the example and output for the same.

html input type butto example

Q: How to HTML input button disabled?

Answer: Use a disabled attribute in <input> tag. See below line of code to how to write code of input button disabling.

After its user unable to click the button, another option is doing enabling and disabling buttons at runtime. Like the below code. By this, you can set a timeout session in the password reset button. A true means disabled and false means enabled.

Image | How to set

Some time is required to show the image in button. But how you can create an HTML input button image?

For that use input type as an image (type=”image”), and give source path off will with file (src=”path+name”). Src (source) is an attribute that gets the image for the button. See below the line of the code example.

Size | HTML input button Width and Height

Using Internal or external CSS you can set HTML input button width and Height. Changing the size of the button is easy to see below the code of the internal CSS input button example to change the size of it.

Input type Button CSS | Style |Color

By using CSS in the input type button you can change the style and color of it. Let’s see the one by one example, how to do it.

Input button Color

A using an Inline CSS to change button color.

html input button color

HTML input button style

Le’ts do some style in the input type button with CSS. For this example, we will use Internal CSS. Where change the text color, size, background, border, etc.

Output: How to look like a button, see below.

HTML input button style

Q: How Create HTML button onClick link?

Answer: You can make <input> tag with <a> tag to do button as Link like this. See the below code line.

Do comment if you have any doubts and suggestions for this tutorial.

Note: The HTML Input Button Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version

Leave a Reply

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