HyperlinkCode.com

How to create 500 totally unique, human-quality articles in just 45 seconds ..

How To Make A Link Button

One of the easiest ways to make a button link is to create a HTML form which will automatically generate the button. This page shows how to create a HTML link button and how to use CSS to style the buttons into different colors and sizes.

HTML Link Button Code

Code

<form>
<input type="button" value="Put Your Text Here" onclick="window.location.href='http://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, or use our Free link button generator.

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.

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

Demo Styled 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: #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>

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 both demos below.

Free web design videos! Learn the easy way to responsive (mobile friendly) web design.

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.

Demo Styled Button Link

HTML Code

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

CSS Code

<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;
-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;
-moz-box-shadow:: 5px 5px 4px #adadad;
-webkit-box-shadow:: 5px 5px 4px #adadad;
box-shadow:: 5px 5px 4px #adadad;
} </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 demo below.

Button Link External Stylesheet

Demo Styled Button Link

HTML Code

<form>
<input class="MyButton" type="button" value="Your Text Here" onclick="window.location.href='http://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;
-moz-box-shadow:: 5px 5px 4px #adadad;
-webkit-box-shadow:: 5px 5px 4px #adadad;
box-shadow:: 5px 5px 4px #adadad;
}

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

Use our FREE link button code generator to create fancy buttons quickly ..

More Hyperlink Codes

© Copyright 2007 - 2017 HyperlinkCode.com.
Site Admin: Ed Zivkovic. Privacy | Terms