AP

Amit_Kumar

Editor & SEO Manager at Technocratpages Aug. 12, 2021, 1 p.m. ⋅ 90 views

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.

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>



Go back to feed

HackersFriend Updates





View more


Events


Nov. 28, 2018, 5:30 p.m.

Python from zero to hero

place Delhi

View details


Aug. 13, 2018, 5:30 p.m.

Python from zero to hero

place Bangalore ( HackersFriend office BTM Layout)

View details