This blog is about Graphic Design, Vector Art, and Cartoon Illustration

Creating web buttons using CSS

Before you reach for Photoshop to create your web buttons as jpegs, please stop. Keep in mind that if you do that you will be throwing away Google search engine optimization for your hyperlinks, among other problems that using jpegs instead of "real" type on a web page produces. Yes, there is no limit to how much you can do with Photoshop, but take a few minutes and explore what you can do with CSS in Dreamweaver. The example shown here gives you some idea of what you can do with CSS.

To do this, I recommend customizing a standard HTML tag. The tag for hyperlinks is "a" (for anchor). Or you can do this for headings. You can also do it as a compound or a class. And it is surprisingly easy.

I am assuming that you already know how to edit CSS rules in Dreamweaver. Let's go beyond just customizing the type. Take a look at the category Background. Select a background color. In the example I selected a dark blue. Note that when you do this, the color goes right to the edge of the type, and it doesn't look very good. No problem! Go the category Box and add padding. That will make the surrounding box push away from the type. Looks better! You will want your buttons to be a standard width, which you can select in this category, too - as width. The measurement is pixels, which is the same as points, remember?

There are many other options to customize your web button, such as in the category Border. In the example I placed a thick gray border only on the top.

Experiment with the options - there are lots! No, you can't put a crocodile skin texture, multiple drop shadows and a inward bevel on your web button using CSS - uh, but maybe you shouldn't.

Try this! It's fun!