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 ..



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



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.

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.


<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='http://www.hyperlinkcode.com/button-links.php'" />
</form>


Tip: Visit html-color-names.com or htmlColorCodes.org for matching color palettes.

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 ..


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.


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


<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 properties 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.


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


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. Change color and other properties as required.

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.


Web Design