Styling Tips
Button creation
This section focuses on the styling of menu buttons. An overview of how css styles borders to achieve a nice beveled look using most sensible color combinations and the method for choosing your colors to get the best results.
The next section Border Tips will explain how to create a non-beveled button set, with and without spacing in between the buttons and the proper border settings to achieve it.
Beveled buttons
The formula for creating a nice beveled button set is very simple as you will see. Here is an example of a beveled button menu.
The colors
The border colors on both the norm and over state are the same color as its button face, just a lighter or darker shade. Using a shade variation of the same color will produce the most realistic bevel effect.
The formula
The simplest method for determining your border colors is to always choose your button face color first. Once you have this it's only a matter of using the same color, only lighter or darker, for the borders.
For an outer bevel effect, the top and left borders are a lighter shade than the face color and the bottom and right borders are a darker shade of the face color.
Note: Typically, the two lighter borders should be the same color and shade. The two darker borders should be the same color and shade as well.
Note: The darker the bottom/right borders are and the lighter the top/left borders are, the more pronounced the bevel effect will appear.
Using this method you can use whatever shades of the original face color to determine how pronounced you want the bevel effect. The most pronounced effect will be when you have lightened the top/left borders to white and the bottom/right borders to black.
Inner Bevel
To produce an inner bevel the border colors are reversed. The top and left borders are the darker ones and the right/left borders are the lighter ones.
Inner Bevel variation
You can experiment with your own color schemes to produce different effects.
In this example we have used the inner bevel method but have colored the lighter shades the same color as the button face giving it a cleaner over button state.
PROCEED TO SECTION TWO ( Horizontal Configurations )
