Download the Free CSS Rollover Button
This is a neat way of including an HTML button link on your site (like the ones one this site): no flash, no javascript to get in the way of search engines. You just type your own text and create your link as required. Easy cut and paste instructions. It can be adapted to use other images. Therollovereffect uses a stylesheet instead of javascript. This is much more efficient and easier for search engines to follow.
Step 1 - Download the images
There are two images, one for the normal state and one for themouseoverstate. Unzip the file and save the folder
buttonsinto the same directory as your html pages. If you rename the folder or save somewhere else you will need to alter the code in red below.
Step 2- Copy the Style Code
Copy and paste the following CSS code into the <head> (between the <head> and </head>tag) of your HTML page:If you put the buttons in a different directory, change the code in red to that name.
Alternatively if you use a linked stylesheet you can simply paste it in there without the style tags. This is better if you want to use the button on several pages. Make sure you use the correct filepath in the links
Step 3 - Copy the HTML for the button
Copy and paste the following in the body of your HTML page:Exact Size Rollovers
This next bit assumes you know a bit about CSS
The buttons above use a tiled background. It is more complicated if you want an exact size background image which includes it’s own text instead of anchor text. You can use eitherblockor
inlinefor the display value.
Using display:block
it is easier to specify the exact size. If you don't need text you just set the exact width and height in the CSS and the padding value to 0px. You leave out any any anchor text (ie actual text in the HTML page for the link) which would otherwise appear over the button as in the buttons above. (NB If you do want anchor text, then the size of text plus twice the padding size in pixels should add up to the height of the button)
display:block, and will stack vertically.
a.block,a:visited.block {display:block; width:135px; height:22px; background-image: url(nav/passive-button.gif); text-decoration: none; padding:0px; } a:hover.block {background-image: url(hover-button.gif);}
In the HTML specify class=block
in the anchor tag. (NB You do not need to name the class the same as the display value, I have just done that here for convenience)
- Place each button in a cell that is part of a row in a table (or use CSS relative positioning which is complex to get right and difficult to get working across all browsers)
- Use
inline
for the display value, however the width and height of the text plus any padding determine the final displayed size, so to display a button with no text you can use a non-breaking space as invisible anchor text. I find it useful to set thebackground repeat
value tono-repeat
, so that the size (text plus padding) values can be slightly too large.
This one uses display:inline
with left and right padding values to set the length. In order to display with no apparent text, I have used a non-breaking space as the anchor text. Height (22px) is determined by text size (12px) plus twice the top and bottom padding value (8px)
a.inline,a:visited.inline {display:inline; background-image: url(nav/passive-button.gif); text-decoration: none; background-repeat: no-repeat; padding-top:4px; padding-bottom:4px; padding-left:66px; padding-right:66px; font-size:12px;} a:hover.inline {background-image: url(nav/hover-button.gif);}
In the HTML code, specify class=inlinein the anchor tag. (NB You do not need to name the class the same as the display value, I have just done that here for convenience)