In a previous post, “Adding Button Elements to a wireframe,” I mentioned that the power of CSS is more than the sum of the parts. Wouldn’t it be nice to just make a few button backgrounds and be done with it? This is why I like to create slices for background buttons and leverage the power of CSS to display the text. The same button background slice can be used over and over again with just a simple CSS code. Note: All the files utilized in this tutorial are available in the download.
Note: For all the files included in this tip, see Download link at the end of the post.
Slicing buttons for background
We will be using slices of two buttons to complement the background styles that will be utilized in our CSS code. Note that some images are zoomed in to 500% for ease of viewing and detail.
In the previous post, I created the Button_02.psd file (see download link below); we will open this file in Photoshop and select the Crop tool. Using the Crop tool select a section from the center of the button that has a 20px width and the entire height (20px height) as shown in Figure A.
Then select enter, and you will have your 20px width and 25px height slice as shown in Figure B.
Save the slice as button_bg_slice.jpg, then do the same processes for the Button_Over_02.psd file and save it as button_bg_slice_over.jpg. The resulting buttons are displayed in Figures C and D below.
The CSS and HTML
Now that the background button images are created, let’s go ahead and mark up our CSS code, and then demonstrate that in a simple navigation header pane in some HTML code. Here are the text styles CSS in Dreamweaver displayed in Figure E:
(Click to enlarge.)
The complete file styles_text.css is available is in the download link below. So here are the main points of what I’ve covered in the Text-Styles CSS:
- Created an <a> link style and a:hover style with text-decorations and color.
- Reset the <p> styling so that the margins are fixed from the defaults.
- Created the button class. Note that it is defined as “a.button”, or in other words, all <a> tags with the class = “button” in the HTML. There is a good chance that later on there could be a second button class for inputs, so in this way, they won’t inadvertently interact, which is why there is not just a “.button” defined. In the button class you will see padding, color, the background image, which is repeated, and a line-height attribute to address some IE implementations that can cut off the button. There is also “a.button:hover” style with the over button background image included.
In the complete CSS file you will also notice I have added “ul#navigation” and “ul#navigation li” id’s so that the unordered list in the HTML will appear inline and I’ve added positioning, margins, and padding. I’ve also addressed the header with some padding also.
The HTML for the sample navigation looks like Figure F:
And the resulting buttons in the HTML file are shown in Figure G:
The HTML file ButtonText.html is available for download (see file for download).
The navigation header with the services button hover over activated is shown above.
These buttons utilize a simple grayscale color scheme, a starting point, and you can adjust the colors to suite your needs, as well as the CSS.
The wonderful thing about this technique is that the buttons will scale width to any length of text you add in the navigation. This eliminates the need to create a custom button for every text, and eliminates having to re-create a new background button every time the text might change.