Css Buttons

5 posts / 0 new
Last post
Css Buttons

I am actually new to css (it's easy) but I ran across problems building buttons.  Currently they are simple buttons instead of pictures, I would like to use my buttons though.  After trying severel different things I finally found out I need to put both the lit up button and un-lit button on the same picture, then tell the script to call a certain point on the picture.  Am I correct or am I wasting my time?  How do you guys line up your buttons on the same picture and easily know how to point to them with css?  

 You basically create what's

 You basically create what's called a 'sprite', which is an image with two separate states in it (one is the button as it would normally look, and the other is a button as it would look in its 'hover' state.

However, there are a couple things you need to consider before you even start writing the CSS for the hover state:

  • If you want to keep your webite 'semantic', you'll need to use an unordered list, or at least have the text in the html, for the button(s).
  • If you're okay with just having a graphic button, it makes life easier, but will not be as indexable via Google.

Now, until CSS3 hits the mainstream, with it's awesome 'multi-background' and border image elements (don't cross your fingers; it's gonna be a while, as Safari/Webkit browsers are the only ones that support most of the standard yet), it's complicated to keep semantic, meaningful html, as well as have beautiful looking buttons.

I'll point you to two different articles that are quite helpful in making beautiful buttons:

  1. The Sliding Doors of CSS: Shows you how to make buttons that have rounded corners and other niceties, while maintaining accessible, clean, and beautiful html code.
  2. CSS Sprites and Another Article on CSS Sprites: This is the method you've roughly outlined in your post above. Basically, you use your CSS's positioning ability to position the background image in the appropriate place to make a beautiful button/hover image. All without ugly HTML!

Advancing the faith.

Ahhh sprites.  Like a 2d

Ahhh sprites.  Like a 2d game.  Very cool!  Thanks, those will be a big help to me.  ;) 

Any time! And yes, even the

Any time! And yes, even the name for it came straight out of 2D game-making textbooks. Instead of Mario running, jumping on mushrooms, and shooting shells all over the place, we're making buttons!

Advancing the faith.

Using ImageReady to creat mousover buttons

ImageReady is perfect for creating sprites for mouseover buttons!  That's what I use.  If you need any help, let me know.

"I'm a PC (practicing Catholic) and I'm only 30 years old."