Visit The Blog

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>