Thursday, 17 January 2019

How to Make HTML Button Links

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


DIRECT VIDEO LINK : https://youtu.be/PKI17ZbO3Gk

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='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 effectssuch 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.

No comments:

Post a Comment