Although there are a number of ways to create a button that is search engine friendly – often the standard Arial or Times text will not do – you want something graphical but you don’t want to give up any SEO value. The answer is this CSS rollover image. If you view the source code – search engines see the text (with a keyword too, which is a plus). Then using a CSS rollover we can use a nice graphical button for human visitors.
The old method to doing this required you to use Javascript. The drawbacks to this were an unintentional “flicker” effect because it required two images to be preloaded and developers often overlooked this extra step. With the CSS rollover you only use one image (so it’s automatically preloaded when the page loads) – eliminating the flicker and speeding download time.
Mouseover Button to see the effect:
CSS Code:
Insert the following code into the <head> section of your page:
|
|
HTML Code:
Insert the following code into the <body> section of your page:
Create two buttons in one file.
