There are two main pieces left to the puzzle of the CSS button, neither of which can be covered in its entirety, but I want to give you some grounding in both. To do so, though, I am going to split this into three posts rather than two, because it got very long. If I miss something that you were hoping to see, tell me.

To see the introduction and the basic code, go here: Part 1

This week we’re going to look at what questions to ask when you set out to add CSS buttons. At this point I’m assuming you’ve decided to implement CSS buttons on your site. So what you need to figure out is where and what.

The first step is to look over your site and figure out where you want to use the buttons. This answer will determine size, formatting, and other aspects. For each location, you’ll need to choose the specifics, and whether you can use the same ones or different ones. These questions are important whether you do your own site design or have someone else do the coding, because they will determine what you want done.

So what are the questions based on each location?

1) Where on the page do you want the button or buttons to appear?
2) Are you planning to use words or logos?
3) Are you planning to use multiple buttons?
4) Do you want the buttons to be the same size?
5) What size or sizes should the buttons be?
6) If you want them clumped together, should they be a row, a column, or a block?
7) Do you want to add extra formatting, like color changes when the visitor hovers?
8 ) How do you want them to look?

Then there issues of reusability:

Tip: You want to reuse as much of the buttons as possible to keep your CSS file manageable. The more CSS code you have, the more your visitors will have to download.

For this there is only one question, but it has a lot of consequences: Are there any format choices that are the same for all buttons or for groups of buttons?

CSS allows you to set the formatting in layers. So, for example, if all the buttons have the same font size, you can set the font size for all buttons at once. Then only set the unique formatting for each specific type. To do that, though, you must identify what is similar, and what is not.

And finally, what are the aspects that each button must have? We went over the various pieces of the CSS last week, but here are the decisions to be made, some of which are only relevant if you do not use an image.

Button Background

1) What color should the button background be?

Button Border

1) What style do you want the border to be?
2) What color do you want the border to be?

Button Font

1) What font do you want to use?
2) What size font do you want to use?
3) Should the font be normal, bold, italics, or another style?
4) What color should the text be?

Button Formatting

1) How much space do you want around the text inside the button?
2) How much space do you want around the button?
3) Do you want the buttons aligned to the left, right, top, bottom, center of the page?
4) How do you want the text aligned within the button?

There are other questions, but these are good for getting you started and helping you put together a mockup. Next week I’ll show you some of the things that can be done and include the code to do it. Again, if there’s something specific you want to see, please make a note in the comments.

Note: Next week will get into how to make some of this happen and show you various button designs in action.