In this tutorial we will explain how to create an HTML button that acts like a link. With this button when you click it, it redirects to a page.

We will show you different ways to create the button:

• Plain HTML.
• Using javascript.
• Using CSS
• Using Bootstrap

Each way of creating a button has it's advantages and disadvantages, make sure you first test all of them to see which one fits better for your problem.

Using only HTML

When using only HTML, you have to use <form> and to specify the desired target URL use the action attribute. You can also use the CSS properrty display: inline; on the form to keep it in the flow with the surrounding text.

Example:

<form action="//tutorials.technology">
    <input type="submit" value="Go to tutorials!" />
</form>

If you want you can use button tag inside the form, which allows to have children html elemets.

Using CSS to simulate a HTML button

When using CSS you can style a link tag using the following stylesheet:

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

The button class is value is "button" so it looks like a button:

<a href="//tutorials.technology" class="button">Go to tutorials!</a>

Create a button using JavaScript

When usign javascript you can use the onlick event to change the window location.

<button onclick="window.location.href='/blog'">Blog</button>

Using Boostrap CSS buttons

If you are using boostrap you can use the class "btn" and all other variants to a, input and button html tags.

The following HTML code uses bootstrap classes to show a link as a button:

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