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

Question

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.

Answer 1

if you are using SSL Certificate

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

Answer 2

If it's the visual appearance of a button you're looking for in a basic HTML anchor tag then you can use the Twitter Bootstrap framework to format any of the following common HTML type links/buttons to appear as a button. Please note the visual differences between version 2, 3 or 4 of the framework:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) sample appearance:

Bootstrap (v3) sample appearance:

Bootstrap (v2) sample appearance:

Answer 3

7 Ways to do that:

1. Using window.location.href = 'URL'
2. Using window.location.replace('URL')
3. Using window.location = 'URL'
4. Using window.open('URL')
5. Using window.location.assign('URL')
6. Using HTML form
7. Using HTML anchor tag

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

Answer 4

Type window.location and press enter in your browser console. Then you can get the clear idea what location contains

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

You can set any value from here.

So For redirect another page you can set href value with your link.

   window.location.href = your link

In Your Case-

   <button onclick="window.location.href='www.google.com'">Google</button>

Answer 5

As of HTML5, buttons support the formaction attribute. Best of all, no Javascript or trickery is needed.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Caveats

• Must be surrounded by <form> tags.
• <button> type must be "submit" (or unspecified), I couldn't get it working with type "button." Which brings up point below.
• Overrides the default action in a form. In other words, if you do this inside another form it's going to cause a conflict.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Browser Support: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

Answer 6

If you want to create a button that is used for a URL anywhere, create a button class for an anchor.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}