HTML button with a link | simple example code

Use the HTML button with a link, you have to use <a> tag or add some JavaScript code. You can also use CSS in case want HTML looks like a link as a button.

JavaScript

 <button onclick="document.location='abc.html'">HTML Page</button>

<a> tag

<a href="#"><button>Link Text</button></a>

HTML button link code

Let’s create an HTML button that acts like a link. When you click the button, it redirects to a page.

Button as a Link using JavaScript

<!DOCTYPE html>
<html>
<body>

     <button onclick="document.location='https://tutorial.eyehunts.com//'">Tutorial EyeHunts</button> 
</body>
</html>

Output:

HTML button with link example

HTML button with link Using <a> tag

The <button> element allows children. The button by itself does nothing, but clicking it activates its parent link.

<!DOCTYPE html>
<html>
<body>

    <a href="https://tutorial.eyehunts.com//"><button> EyeHunts </button></a>

</body>
</html>

Using form and input type

The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

Q: How to make a button link to another page in HTML?

Answer:- Here is example code of button link to another page in HTML.

<a href="link.html"><button> Link </button></a> <!-- Button link -->

OR

<button 
  onclick="document.location='default.asp'">HTML Tutorial</button>

If you are using bootstrap, you can use this to do it for you:

<a href="#" class="btn btn-info" role="button">Link Button</a>

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

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


Leave a Reply

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