- How to Add an HTML Button that Acts Like a Link
- Add an inline onclick event
- Example of adding an onclick event to the tag:
- Example of adding an onclick event to the tag:
- Use the action or formaction attribute.
- Example of creating a button acting like a link with the action attribute:
- Example of opening a link from a button in a new window:
- Example of creating a button acting like a link with the formaction attribute:
- Style the link as a button
- Example of styling a link as a button with CSS:
- Example of styling a link as a button and adding a hover effect:
- How about the accessibility?
- How to Add an Onclick Effect with HTML and CSS
- Example of adding an onclick event by using the checkbox hack:
- Result
- Example of adding an onclick event for resizing the image:
- Example of adding an onclick effect on the tag:
- HTML Input Button onClick | Link, Disabled, Image and CSS
- Syntax
- Example | How to use
- Event | HTML Input Button onClick
- Value | Get
- Q: How to the HTML input button disabled?
- Image | How to set
- Size | HTML input button Width and Height
- Input type Button CSS | Style |Color
- Input button Color
- HTML input button style
- Q: How Create HTML button onClick link?
How to Add an HTML Button that Acts Like a Link
There are several ways of creating an HTML button, that acts like a link (i.e., clicking on it the user is redirected to the specified URL). You can choose one of the following methods to add a link to the HTML button.
Add an inline onclick event
You can add an inline onclick event to the tag.
Example of adding an onclick event to the tag:
html> html> head> title>Title of the document title> head> body> button onclick="window.location.href='https://w3docs.com';"> Click Here button> body> html>It is also possible to add an inline onclick event to the tag within the element.
Example of adding an onclick event to the tag:
html> html> head> title>Title of the document title> head> body> form> input type="button" onclick="window.location.href='https://www.w3docs.com';" value="w3docs" /> form> body> html>Use the action or formaction attribute.
Another way of creating a button that acts like a link is using the action or formaction attribute within the element.
Example of creating a button acting like a link with the action attribute:
html> html> head> title>Title of the document title> head> body> form action="https://www.w3docs.com/"> button type="submit">Click me button> form> body> html>To open the link in a new tab, add target=»_blank» .
Example of opening a link from a button in a new window:
html> html> head> title>Title of the document title> head> body> form action="https://www.w3docs.com/" method="get" target="_blank"> button type="submit">Click me button> form> body> html>Since there is no form and no data is submitted, this may be semantically incorrect. However, this markup is valid.
Example of creating a button acting like a link with the formaction attribute:
html> html> head> title>Title of the document title> head> body> form> button type="submit" formaction="https://www.w3docs.com">Click me button> form> body> html>The formaction attribute is only used with buttons having type=»submit» . Since this attribute is HTML5-specific, its support in old browsers may be poor.
Style the link as a button
Add a link styled as a button with CSS properties. A href attribute is the required attribute of the tag. It specifies a link on the web page or a place on the same page where the user navigates after clicking on the link.
Example of styling a link as a button with CSS:
html> html> head> title>Title of the document title> style> .button < background-color: #1c87c9; border: none; color: white; padding: 20px 34px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; > style> head> body> a href="https://www.w3docs.com/" class="button">Click Here a> body> html>Let’s see one more example.
Example of styling a link as a button and adding a hover effect:
html> html> head> title>Title of the document title> style> .button < display: inline-block; padding: 10px 20px; text-align: center; text-decoration: none; color: #ffffff; background-color: #7aa8b7; border-radius: 6px; outline: none; transition: 0.3s; > .button:hover < background-color: #c2c7c7; > style> head> body> a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html">HTML button tag a> body> html>How about the accessibility?
Let’s take accessibility into our account for the last example. Here are some improvements to make the code more accessible:
If the button contained an image, it would be important to provide an alt attribute to make the image accessible to screen readers. Since this button doesn’t have an image, we don’t need to worry about this.
Adding a label to the button will help users who rely on assistive technology understand the purpose of the button. We can do this by wrapping the button text in a element and adding an aria-label attribute to the button.
To improve visibility for users with low vision, we can increase the contrast between the text color and background color of the button. We can achieve this by making the background color darker or the text color lighter.
Adding a focus style to the button will help users who navigate using the keyboard to see which element is currently focused. We can add a simple border to the button to achieve this.
Here’s the updated code with these improvements:
html> html> head> title>Title of the document title> style> .button < display: inline-block; padding: 10px 20px; text-align: center; text-decoration: none; color: #ffffff; background-color: #3c5d6e; border-radius: 6px; outline: none; transition: 0.3s; border: 2px solid transparent; > .button:hover, .button:focus < background-color: #c2c7c7; border-color: #7aa8b7; > style> head> body> a class="button" href="https://www.w3docs.com/learn-html/html-button-tag.html" aria-label="Learn about the HTML button tag">span>HTML button tag span> a> body> html>How to Add an Onclick Effect with HTML and CSS
The most common way of creating a click event with CSS is using the checkbox hack. This method has broad browser support. You need to add a for attribute to the element and an id attribute to the element.
Example of adding an onclick event by using the checkbox hack:
html> html> head> style> label < display: block; background: #dbdbd9; width: 80px; height: 80px; > #box:checked + label < background: #fffc47; color: #666666; > style> head> body> form action="/form/submit" method="post"> input type="checkbox" id="box" /> label for="box">Click here label> form> body> html>Result
In the example above, we applied the same value both to the id attribute of the tag and for attribute of the tag. The label onclick is restyled with the :checked pseudo-class.
Example of adding an onclick event for resizing the image:
html> html> head> style> #btnControl < display: none; > #btnControl:checked + label > img < width: 150px; height: 170px; > style> head> body> input type="checkbox" id="btnControl" /> label class="btn" for="btnControl"> img src="https://images.unsplash.com/photo-1565520651265-1148c3b277f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" id="btnLeft" /> label> body> html>Since a element can be associated only with one form control, you cannot just place a button inside the tag. But you can add some CSS to change the appearance and behavior of the button.
Example of adding an onclick effect on the tag:
html> html> head> style> #btnControl < display: none; > .btn < width: 80px; height: 30px; background: #ffffff; border-radius: 7px; padding: 1px 3px; box-shadow: 1px 1px 1px #000000; display: block; text-align: center; background-image: linear-gradient(to bottom, #e8e8e8, #a1a1a1); font-family: arial; font-size: 14px; line-height: 30px; > .btn:hover < background-image: linear-gradient(to bottom, #97e8ae, #3be36b); > .btn:active < margin-left: 1px 1px 0; box-shadow: -1px -1px 1px #000; outline: 1px solid #000000; -moz-outline-radius: 7px; background-image: linear-gradient(to top, #97e8ae, #3be36b); > #btnControl:checked + label < width: 70px; height: 74px; line-height: 74px; > style> head> body> input type="checkbox" id="btnControl" /> label class="btn" for="btnControl">Click here label> body> html>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, sign up, etc. Every place where the action required from users needed a Button. In Html, you can use the button with 2 ways- tag and tag. In this tutorial, we will learn about HTML Input Button and see its examples.
Syntax
It’s easy to use, just write tag and type=”button”. Here is a simple HTML Input Type Button syntax.
Example | How to use
See below, for example, HTML Input Button text. It’s using the same tag as an earlier tutorial – Input text box, Radio button, Checkbox.
Output: See below simple button example screenshot.
Event | HTML Input Button onClick
When the user wants to take action that time onClick methods work. It will either hit the server or any javascript. In this HTML Input Button onClick Example we will look at how to perform JavaScript function.
HTML button onclick Event
function myFunction() Output: See below GIF image how it looks.
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.
Q: How to the HTML input button disabled?
Answer: Use a disabled attribute in 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 examp le.
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 style
Let’s 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.
input[type=button], input[type=submit], input[type=reset] HTML input button style
Output: How to look like a button, see below.
Q: How Create HTML button onClick link?
Answer: You can make tag with 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