Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P10: Morten Rand-Hendriksen is the owner and creative director of Pink & Yellow Media, a boutique-style design company providing digital media consulting and creations for individuals, businesses, and broadcast television. He was awarded the Microsoft MVP (Most Valuable Professional) Award for his work with Microsoft Expression in 2008. | 252 HOUR 15 Buttons Buttons Buttons 3. Import the images named and from the lesson files and save them in a new folder called buttonGraphics. 4. Make a new style and give it the selector name .advancedBox a. In the Font category set font-family to Arial Helvetica sans-serif font-size to font-weight to bold and text-transform to uppercase font-color to white FFFFFF . Check the None box under text-decoration to get rid of the line under the text. 5. In the Background category set background-image to the image you just imported and set background-repeat to no-repeat. Because the image is larger than the text and you want it to surround the text go to the Box category and set padding to 13px on all sides. Click OK to apply the style. 6. In Design view you can see that the new button background is applied but the buttons are covering each other see Figure . This is because the list items FIGURE The .advancedBox a style is applied to the new buttons but they cover each other because the list item style has not been modified yet. have not yet been styled and the browser assumes that the list items are the height of the text without the padding. To fix this problem create a new style with the selector name .advancedBox li and set the padding-top and padding-bottom attributes to 13px to match the link style you just created. Click OK to apply the new style and the buttons no longer overlap. 7. To create a hover-over effect create a new style with the selector name .advancedBox a hover. Because the hover pseudoclass inherits all the Creating Buttons from Scratch Using CSS 253 styling from the main a class all you need to do is change background-image to . Click OK and then save and preview in your browser. Now instead of the background color changing when the mouse hovers over the button the background image swaps out. And because the background image is part of the a style the entire .
