by D. Sproul | October 25th, 2009
New CSS can create buttons that look like an image from Illustrator or Photoshop. They are light to load because they are just styled with code; the browsers do the rendering work.
Create a CSS style for your navigation buttons. Set the Display to “Block.” Use “Line-Height” to set the block height instead of “height;” setting the height with “line-height” will automatically center the text vertically in the link.
Set the “width” and “padding” between links. Then just create the link text in an unordered list for each navigation item, then end the list. It’s live text, so search engines will like it.
You can also design using borders of many different styles (single, double & dotted, etc.) and different colors. If you make the border really thick you can see a bevel edge around the corners. The bevel can look bad if you design a border only along along a left edge.
You can also design navigation buttons in CSS using an image file. The difference from old web design is that you use only one image file, without any text on it, for all navigation buttons on all pages. This is much lighter than having separate image files for each navigation button. It’s also much easier to update the live text links, which search engines like.
You could design with one other image for all roll-over links. Again, the one image file will have no text on it. Add the background image to the “a:hover” style in your CSS file.
Try designing your new buttons in CSS. Light to load, easy to change for an entire website, especially without the text on them.
