bootsrap-buttons

How to create HTML button that acts like a link

Do you wish to create an HTML button that acts like a link? I am talking about a button that redirects to a page once clicked. You have a number of options as I am going to show you. Some of these options have some limitations here and there but finally, we will get to the best option among them.

Option 1

<form method="get" action="/page3">
    <button type="submit">Continue</button>
</form>

The limitation with this is that it is not fully compatible with some browsers, it adds a question mark character at the end of the URL.

Option 2

Option 2 on How to create HTML button that acts like a link requires you to deploy JavaScript. However, this make it less accessible to screen readers.

<button onclick="window.location.href='/page2'">Continue</button>

Option 3

Another beautiful way to achieve this is by use of Bootstrap. Chose the Bootstrap you wish to use: Bootstrap 3, 4 or 5. Then create a link and give it a btn Class as shown below.

<a class="btn btn-primary" href="your page here..">Continue</a>
<a class="btn btn-success" href="your page here..">Next</a>
<a class="btn btn-warning" href="your page here..">Continue</a>
Bootstrap_buttons
Bootstrap 5 Buttons
Advertisement

Best Option

Our best option on how you can create an HTML button that acts like a link happens to be use of pure HTML. You simply make use of html form element where the forms action quotes the page you wish to redirect to.

To spice things up, deploy CSS. Within CSS, set Display to inline so as to keep your form in flow with the surrounding text. For the submit button, use <button type=”submit”> since <button> element allows children.

<form action="https://hacklifetips.com">
    <input type="submit" value="Get it Here!!" />
</form>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Related Posts

Facebook

Get the Facebook Likebox Slider Pro for WordPress