How to Make HTML Button Links

Using <form> with onclick and href

This page shows how to make HTML button links with onclick and href using the <form> tag and styling them using CSS into different colors and sizes.

One of the easiest ways to make HTML button links is to create a HTML <form> which will automatically generate the button ..

Code - HTML Link Button

<form>
<input type="button" value="Put Your Text Here" onclick="window.location.href='https://www.hyperlinkcode.com/button-links.php'" />
</form>

Output

While this method is easy because it has minimal code, the button looks a bit plain. It is possible however to make great looking hyperlink buttons by adding CSS code. Keep scrolling to see examples.

Link Button Inline CSS Styling Code

This is an example of how to style a button link with inline CSS. The code can be used by directly inserting it into the HTML same as the first example. Change color and other properties as required.

Example Styled Button Link

Code - Example Styled Button Link

<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: #ffff00; color: #000; border-radius: 10px; border: 1px solid #999; font-size: 150%;" type="button" value="Put Your Text Here" onclick="window.location.href='https://www.hyperlinkcode.com/button-links.php'" />
</form>

If more than one styled button is required on the same website, or if you want additional effects such as making the color change when the mouse is hovered over the button, it is recommended to use an internal or external stylesheet for faster editing of multiple buttons at once. See example below ..

Button Link Internal Stylesheet

This button code has a slight but important difference than the other styled button because the class attribute has been added with the value MyButton so it can select the CSS rules from the stylesheet. Change the MyButton values as required.

Demo Styled Button Link - Changes color when mouse hovers over it.

Code - HTML

<form>
<input class="MyButton" type="button" value="Your Text Here" onclick="window.location.href='https://www.hyperlinkcode.com/button-links.php'" />
</form>

Code - CSS

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

The above <style> belongs in the <head> section of HTML documents. Change color and other propertiesfif more as required. This Internal CSS code will style button links only on the page where the code is inserted. If button links are required on multiple pages on the same website, an external stylesheet is recommended. See example below.

Button Link External Stylesheet

Demo Styled Button Link - Changes color when mouse hovers over it.

HTML Code

<form>
<input class="MyButton" type="button" value="Your Text Here" onclick="window.location.href='https://www.hyperlinkcode.com/button-links.php'" />
</form>

CSS Code

input.MyButton {
width: 300px;
padding: 20px;
cursor: pointer;
font-weight: bold;
font-size: 150%;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
-moz-box-shadow:: 6px 6px 5px #999;
-webkit-box-shadow:: 6px 6px 5px #999;
box-shadow:: 6px 6px 5px #999;
}
input.MyButton:hover {
color: #ffff00;
background: #000;
border: 1px solid #fff;
}

The above CSS styling rules go into external stylesheets.

The code will style link buttons with the class MyButton on all pages of a website. Rename MyButton to anything you want. Make as many different button styles as you want as long as each name is unique.

This method saves time because only the stylesheet needs to be edited to make changes to all link buttons. See easy instructions for how to setup an external stylesheet.

Hyperlink Articles

Advertisement

Hyperlink Articles