CSS Buttons Question

[MattSepeta]

I am more of a design guy at heart but have been helping my company do some web over-hauling of our sites. We have been using simply Photoshop-made buttons for our links.

Question: Can someone check out this site. I am wondering if the buttons on the top leading off the page are made strictly using CSS/HTML, or if there is a photoshop template behind it.

From what I can gather on a few other CSS Button tutorials there may be a blank photoshop template behind it and the CSS can stretch it and add the text? Am I way off base?

Thanks for helping me handle my code ignorance

EDIT: Forgot about the mouseover glow... Is this done strictly through CSS or do you need an "after" state image?

 

[UTclassof89]

Those can be done with pure CSS.

Check out cssportal.com. The have a neat online generator for cross-browser rounded corners as well as gradients.

 

[bpaluzzi]

I am more of a design guy at heart but have been helping my company do some web over-hauling of our sites. We have been using simply Photoshop-made buttons for our links.

Question: Can someone check out this site. I am wondering if the buttons on the top leading off the page are made strictly using CSS/HTML, or if there is a photoshop template behind it.

From what I can gather on a few other CSS Button tutorials there may be a blank photoshop template behind it and the CSS can stretch it and add the text? Am I way off base?

Thanks for helping me handle my code ignorance

EDIT: Forgot about the mouseover glow... Is this done strictly through CSS or do you need an "after" state image?

Those are done with a background image:
http://komotion.com/wp-content/themes/komotion/styles/blue/button_sprite.png

The mouseover effect is using javascript to change the opacity of the image -- it makes it slightly more transparent (80% transparent), which gives the "lightening" effect. Nice little effect!

 

[manueld]

Those are done with a background image:
http://komotion.com/wp-content/themes/komotion/styles/blue/button_sprite.png

The mouseover effect is using javascript to change the opacity of the image -- it makes it slightly more transparent (80% transparent), which gives the "lightening" effect. Nice little effect!

Just keep in mind as well that the transparency trick doesn't work in IE so make sure you have a fall back in those instances.

 

[bpaluzzi]

Just keep in mind as well that the transparency trick doesn't work in IE so make sure you have a fall back in those instances.

Good point! I'd recommend using jQuery for a project like this. The jQuery transparency functions work across all browsers.