How to Create an HTML Button Link

by

There are 4 ways to create an HTML button link – using an HTML form with a href attribute and an onclick event, styling directly with inline CSS, styling with an internal style sheet and styling with an external style sheet. In this article, I will show you all 4 of these methods so you can easily create an HTML button link for your website.

Using an HTML form

This is the easiest way to create an HTML button link. First, you need to create an HTML <form> and the button will be automatically generated for you. Then you include an onclick event in it where you instruct the button to go to a specific URL when clicked.

HTML Button Link Code

This is the code for the HTML button link. You need to copy and paste as plain text in order for it to function properly.


<form>
<input type="button" value="Click Here" onclick="window.location.href='http://example.com/test-page'"/>
</form>

Here, http://example.com/test-page is the URL to which you want to send the user when this button is clicked. Make sure to replace it with your own URL.

This is how the button looks like on the frontend of your website when you use the code above.

screenshot showing an html button link created in a form

Styling with inline CSS

With this method, you create the button first and style it with inline CSS.

HTML Button Link Code


<form>
<input style="width: 300px; padding: 20px; cursor: pointer; box-shadow: 6px 6px 5px; #999; -webkit-box-shadow: 6px 6px 5px #999; -moz-box-shadow: 6px 6px 5px #999; font-weight: bold; background: #ff8d00; color: #000; border-radius: 10px; border: 1px solid #999; font-size: 150%;" type="button" value="Click Here" onclick="window.location.href='http://example.com/test-page'" />
</form>

This is how the button looks like when you use the code above.

screenshot showing an html button link created in a form with inline css

Using an Internal Style Sheet

This method is much cleaner as the CSS code comes from an internal style sheet. The code is added to the header of your website.

HTML Button Link Code

The main difference is that you add a class attribute to the button and define the CSS rules for it in the style sheet.

<form>
<input class="demobutton" type="button" value="Click Here" onclick="window.location.href='http://example.com/test-page'"/>
</form>

CSS Code


<head>
<style>
input.demobutton {
width: 300px;
padding: 20px;
cursor: pointer;
font-weight: bold;
font-size: 150%;
background: #0d3179;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
}
input.demobutton:hover {
color: #ffff00;
background: #000;
border: 1px solid #fff;
}
</style>
</head>

This is how the button looks like when you use the code above.

screenshot showing an html button link created in a form with a style sheet

As you can see the code for the hover effect has also been added for the button.

Using an External Style Sheet

This method is very similar to the previous one. The only difference is that the rules come from an external style sheet or CSS file. This is very useful when you are looking to embed HTML button links with similar CSS on other pages of your website.

For this method, you need to create an external style sheet and place the CSS code in it. The style sheet then can be included on every page of your website (or pages where you wish to embed these buttons).

CSS Code


<style>
input.demobutton {
width: 300px;
padding: 20px;
cursor: pointer;
font-weight: bold;
font-size: 150%;
background: #0d3179;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
}
input.demobutton:hover {
color: #ffff00;
background: #000;
border: 1px solid #fff;
}
</style>

That’s it! I hope this tutorial helped you create HTML button links for your websites. If you have any suggestions or questions feel free to share in the comments.

Leave a Comment