How to create an HTML button that acts like a link

When designing your website, you want to use a button to link to other pages or websites. This is a better option when you don't like to add a form or something like that. The method is quite simple to do adding an HTML button link code.

How to Create an HTML Button Using the Button Tag in an A Tag

One option is to insert the <button> tag into the <a> tag.

<a href='https://www.hackersfriend.com/'><button>Link To HackersFriend</button></a>

This method is very simple and turns the entire button into a link.

How To Turn a Link into a Button with CSS

Another option is to create the link using the <a> tag as usual and format it with CSS.

<a href='https://www.hackersfriend.com/'>Link To HackersFriend</a>

Once the link is created, you can use CSS to simulate it as a button. For example, when a user clicks on a link, you can add a border, a background colour, and some patterns.

How To Style Text Buttons

To get the "text button" look, we remove the default background colour and border:

Step-1: Add HTML

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>

Step-2: Add CSS

Let's remove the default background and frame colour to get the "text button" look.

.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
font-size: 16px;
cursor: pointer;
  display: inline-block;
}

/* On mouse-over */
.btn:hover {background: #eee;}

.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}

How to Put a Button inside a Form Using HTML

Another way to add a button is to add an element to the form tag. Enter the desired destination address in the properties of the action module.

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