CSS Rollover Navigation Tutorial

Tutorial

  1. Put the following code onto your website where you want the navigation.
    <div class="rollover">
        <a href="#">Home</a>
        <a href="#">Links</a>
        <a href="#">Updates</a>
    </div>
  2. Edit the above code so that the links lead to your pages. Change each # to the address of the page, and "Home", "Links", and "Updates" to the names of the pages. You can add as many links as you want.
  3. Put the following code into the <head> part of your website or in your CSS file.
    <style type="text/css">
    .rollover a {
        font-family: tahoma;
        font-size: xx-small;
        margin-bottom: 5px;
        margin-right: 5px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        text-align: center;
        text-decoration: none;
        width: 60px;
    }

    .rollover a:link, .rollover a:visited {
        background-color: #CCCCCC;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
        color: #333333;
    }

    .rollover a:hover, .rollover a:active {
        background-color: #00CC00;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
        color: #000000;
    }
    </style>
  4. If you want the buttons to be one on top of the other (vertical), add this code to the same place as in the previous step. If you want the buttons to go beside each other (horizontal), you don't need another code.
    <style type="text/css">
    .rollover a { display: block; }
    </style>
  5. Look at the first section of the code:
    .rollover a {
        font-family: tahoma;
        font-size: xx-small;
        margin-bottom: 5px;
        margin-right: 5px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        text-align: center;
        text-decoration: none;
        width: 60px;
    }
    You can change each attribute to change the button's general appearance.
    "font-family: tahoma;" is the font. Some other fonts that should appear correctly in most browsers are "times new roman", "verdana", "arial", "georgia", "comic sans ms", or "trebuchet ms".
    "font-size: xx-small;" is the font size. It can be changed to "x-small", "small", "medium", "large", "x-large", or "xx-large" or a number in pixels (eg. "12px").
    "margin-bottom: 5px;" is the number of pixels below the button. This attribute only effects vertical buttons.
    "margin-right: 5px;" is the number of pixels beside the button. This attribute only effects horizontal buttons.
    "padding" is the extra space around the text inside the buttons and generally does not need to be changed. You can play around with the numbers to change the size of your button if you want.
    "text-align: center;" is the alignment of the text. You can change "center" to "left" or "right".
    "text-decoration: none;" specifies that there should be no underline beneath the text. You can change "none" to "underline" to see the underline.
    "width: 60px;" is the width of the button. If your link text is long, you will want a bigger width. If you don't care if the buttons are all the same width, you can remove this line.
  6. Look at the second section of the code:
    .rollover a:link, .rollover a:visited {
        background-color: #CCCCCC;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
        color: #333333;
    }
    You can change each of the attributes to change the look of the button when there is no cursor over it.
    "background-color: #CCCCCC;" is the background colour of the button. "#CCCCCC" can be changed to another colour value.
    "border-color: #000000;" is the border colour. "#000000" can be changed to another colour value.
    "border-style: solid;" is the border style. "solid" can be changed to "dotted" or "dashed".
    "border-width: 1px;" is the border width. "1px" can be changed to another number. Change "1px" to "0px" if you don't want a border.
    "color: #333333;" is the font colour. "#333333" can be changed to another colour value.
  7. Look at the third section of the code:
    .rollover a:hover, .rollover a:active {
        background-color: #00CC00;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
        color: #000000;
    }
    You can change each of the attributes to change the look of the button when there is no cursor over it.
    See the step above to learn what each line does, and change it in this code.

CSS Rollover Navigation Example

Horizontal Roll Over Example