HTML: Create a button with mouse-over effect

A tiny tutorial showing you how to create a button with mouse-over effect in HTML for your blog posts.

Final result:





To do it  paste in html editor the following:

< a href="http://BUTTON_LINK" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img onmouseout="this.src='http://IMAGE_ON_MOUSE_OUT.gif'" onmouseover="this.src='http://IMAGE_ON_MOUSE_OVER.gif'" src="http://IMAGE_ON_MOUSE_OUT.gif" /> </a>

Just add your own mouse over and mouse out images links as well as the button link (where button refers to) and you are done! (highlighted green text)