• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 1. Using CSS to Position and Sty... > Creating Buttons and Background Shap...

Creating Buttons and Background Shapes

Now that you have a grip on CSS selectors, you’ll create some interesting button-styled navigation using a couple of small background images and an unordered list. You’ll also take away the square look that the bottom of the navigation <div> would normally have. You already have the actual nav <div> on the page, but it doesn’t yet have any background color or styling. You’ll add the <ul>, <li>, <a>, and <p> styling. Each one carves out a specific area for itself that contributes to the overall style of the button area.

Place your cursor in the bottom of the project1.css document. In the Snippets panel, select the MX Magic 2004 > Project 01 > 02-Button CSS snippet and insert it into your page.

The div#nav ul selector adds margins on each side of the list. This keeps the space around the list so that the colored background will show when the list is styled.


To be accurate and specific, all the selectors for the navigation <div> begin with div#nav and a space, and then you continue down the cascade naming each element in the document tree until you get to the name of the element you’re styling. These are known as Descendant Selectors. You are defining rules for elements based on the element appearing inside of a specific <div> and even inside other specific elements.

The div#nav li selector removes the list style (bullet) and adds padding inside the <li> itself on the top and bottom. This begins to create a more button-like look.

div#nav li a is the selector that defines the actual link itself. The link must be set to display: block with a width of 100% to be “clickable” through the whole button area, not just on the text itself. A left margin is set to hold the text away from the left edge.

Notice the grouping of the div#nav li a:hover, div#nav li a:focus selectors. They are written with a comma between the selectors because they have identical declarations. The a:focus selector applies to the look you see when tabbing through the page. This is a good habit to get into to make your page visually more accessible.


Make sure when separating selectors with commas that you use the entire selector each time. For example: Due to the lack of specificity, div#nav li a:hover, a:focus is not the same as div#nav li a:hover, div#nav li a:focus.

Save your document, and preview the index file in your browser.

You need to add some background color and images for styling. For example, adding a white background shape (image) to the bottom of the div#nav will get rid of the squareness normally there. In the CSS Styles panel, highlight the selector called div#nav. Click the Edit icon at the bottom.

Go to the Background category, browse to the image called corner.gif in your assets folder, and set:

Background: #897EA6

Repeat: no-repeat

Horizontal Position: 100%

Vertical Position: 100%

Click OK. Save the CSS, and preview your page.

Notice the change in the navigation <div>, especially the bottom-right corner. Yes, it is still square, but it no longer appears that way visually. This background image does not have fixed positioning, so it is rendered in relation to the element it’s in, not the viewport. Because the rendering is measured from the top-left corner, this graphic is set to 100% (from left), 100% (from top). This places it in the bottom-right corner.


Using this method, you can create just about anything your mind can conceive. Just make sure the image is the same color as the page background it will be placed over. Matte it with the background color of the <div> it will be sitting on, and export it as a transparent .gif for best results. This gives the illusion of a cutout area in the normally square-cornered <div>.

Use the same method as in steps 3 and 4 to attach a background image to the buttons. Open the div#nav li selector and add these settings:

Background: #92C837

Repeat: no-repeat

Horizontal Position: 100%

Vertical Position: 50%

URL: assets/inverted.gif

Add these declarations to div#nav li a:hover, div#nav li a:focus:

URL: assets/tip.gif

Repeat: no-repeat

Horizontal Positioning: 100%

Vertical Positioning: 50%

Width: 80%

Background: #000

The width is set to 80% so that the <a> element doesn’t go all the way to the right edge of the <li> element, and the background image of the link area shows on hover. Notice that the positioning on these background images is set horizontally to 100% (all the way to the right side), but vertically to 50%. This keeps the center point of the graphics in the center of the button. The images were created about twice the size they appear to be at a moderate text size in case the viewer’s text size is set larger or increased.


I created the button background look by exporting the triangular purple shape (same as the background color it’s sitting on) matted in green (same as the button it’s placed in). The link background look was created by exporting a green triangular shape with a black matte.

Save your work.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint