Plain HTML Button
Html
<button>Click here.</button>
Plain HTML Link
Open Google in another page.Html
<a href="http://google.com" target="_blank">Open Google in another page.</a>
HTML Link With CSS - Simple Hover
Open Google in another page.Html
<a href="http://google.com" class="link1" target="_blank">Open Google in another page.</a>
CSS
.link1:hover {text-decoration: none;}
HTML Link With CSS - Fancy Hover
Open Google in another page.Html
<a href="http://google.com" class="link2" target="_blank">Open Google in another page.</a>
CSS
.link2
{
border: solid 2px #aaa;
border-radius: 3x;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #89ba38;
color: #000;
text-decoration: none;
font-weight: bold;
margin: 10px 3px 10px 3px;
padding: 3px;
display: inline-block;
}
.link2:hover { background-color: #acea11; }
HTML Link With CSS - Fancy Hover with jQuery
Open Google in another page.This link uses the jQuery color plugin.
Html
<a href="http://google.com" class="link3" target="_blank">Open Google in another page.</a>
CSS
.link3
{
border: solid 2px #aaa;
border-radius: 3x;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #89ba38;
color: #000;
text-decoration: none;
font-weight: bold;
margin: 10px 3px 10px 3px;
padding: 3px;
display: inline-block;
}
jQuery
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.color.js"></script>
<script type="text/javascript">
$(".link3").live("mouseover", function(){
$(this).stop().animate( {backgroundColor: "#acea11"}, 300 );
}).live("mouseout", function(){
$(this).stop().animate( {backgroundColor: "#89ba38"}, 100 );
});
</script>