deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

How to create an HTML button that acts like a link?

HTML buttons are used in various ways on the web page such as for hiding and showing any components, for submitting any task, and many more.

Sometimes HTML buttons can be used as a link for redirecting to some specific page. There are many ways through which we can create a button that acts as a link.

Using <button> tag within <a> tag

The simplest way to create the button which acts as a link is to wrap the <button> within the <a>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <a href="http://www.studytonight.com" target="_parent">
      <button>Click me !</button>
    </a>
  </body>
</html>

Output

when you click on the button you will be redirected to the page.

button act as link

Using <form> tag

Use the <form> tag and add the desired URL to the action attribute within <form>. Add <button> tag with type="submit" within the form.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <h2> Button act as link using form</h2>
    <form action="http://www.studytonight.com">
      <button type="submit"> Go to </button>
    </form>
  </body>
</html>

Output

Here is the output of the above program.

Button using form

Style the button as a link using CSS properties

We can also use CSS property to style the link to appears as a button. Include button class within tag <a>. Also use CSS property to add background color, padding, border, margin, etc to the button class.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
      .button {
        background-color: green;
        border: none;
        color: white;
        padding: 10px 20px;
        font-size: 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h2> Button as link using CSS </h2>
    <a href="https://www.studytonight.com/" class="button">Click Here</a>
  </body>
</html>

Output

Here is the output of the above program.

Button as link

Using JavaScript

We can use onlick event attribute to buttons so that they act as links. Just click on the button and it will redirect to the specified URL.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
 
  <body>
    <h2> Button as link using Javascript </h2>
    <button onclick="window.location.href='https://studytonight.com';">
      Click Here
    </button>
  </body>
</html>

Output

Here is the output of the above program.

Button as link using javascript

Conclusion

We have seen that there are several ways that can be used to create an HTML button that acts as a link.