Make Buttons with Hover Load Faster

May 8, 2008

With CSS we can target the ‘:hover’ child class for links and update their background properties. Example .nav a:link, .nav a:visited { width: 160px ; height: 30px ; display: block; overflow:hidden; background: url(’images/nav1.gif’) 0px 0px no-repeat; } .nav a:hover, .nav a:active{ background-position: 0px -30px; } The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.  Read More →

Changing Link Colors with CSS

May 7, 2008

Introduction This guide shows how to specify link colours with CSS whether you want the same colours for all links or different colours for certain links. Also includes how to change the colour “onmouseover” (hover colour). Specifying the default colour If you want to specify the default colours which will be used in a web page you should use the following code. These colours will be applied to all links in the document. <style type="text/css"> <!-- a:link {color: #000000; text-decoration: underline;... [Read the full story]