How would I set a css border glow property for buttons like the year buttons here?
http://kiefferfurniture.com/literature/archive/years/2010/2010archive. htm
Hi kcfi,
The example page you're looking at uses javascript to swap the images on rollover.
There is a way to do the same thing with just CSS.
Either way though, you're going to need a graphic for the "normal" state and one for the "rollover" state.
The CSS method allows the designer to provide both states in one graphic.
Here's a link to a good tutorial for the CSS method.
~codeDawg
It's right there in my post - last sentence, the word "link".
Here it is again:
http://kyleschaeffer.com/best-practices/pure-css-image-hover/
I'll look into box-shadow. No matter how I end up doing it, I will won't want the text part of the image (should I go the image route). If I had to have the text part of the image, then I imagine I would need a different image for each year button. Too much work, not worth getting the glow.
I hear 'ya. Your custom furniture site goes back a few years.
(One thing I like about my line of work is that I get to meet artisans of many different crafts.)
If creating images for buttons with the text (year) embedded is what is really bugging you, there may be another approach.
Create two "blank" buttons - one for "glow" and one for "normal".
Use the buttons as backgrounds for your archive year links (anchor points) - as outlined in the tutorial link I gave you.
This way you only have 2 (reusable) images, you are using pure CSS, you avoid the CSS3 headaches and you can add more years to your archives menu without creating any more images.
~codeDawg
North America
Europe, Middle East and Africa
Asia Pacific