Creating Rollover Buttons

To Begin

The first thing you will want to do is to create a set of links in the HTML document
by typing the following in the body of the HTML:

1. <a href="page.html"> where page.html is the URL of the destination web page.
2. Next, type the label text; the text that is highlighted (usually blue and underlined)
   and when you click on the label text, it will take you to the URL in step 1.
3. Then, type </a> to close and complete the definition of the link.
4. Last, be sure to make a few different links to use in this tutorial.

Next

We will set up the style for the links on the page.


1. Click the New CSS Rule icon in the styles panel (which looks like a plus sign).
2. For the selector type choose class and for the selector name choose a. Select ok.
3. Select the attributes you want the links to have such as: font family, text-decoration,
   display, margin, padding, etc.

• For this demonstration I used the following;
  Font: trebuchet MS, Verdana, sans-serif
  Text-decoration: none
  Display: block
  Margin and Padding: 2px
  Width: 5em
  Color: #900

Then



In the CSS, style we will change the a:link and the a:visited selectors with
the "initial state" of the links by adding background color or image properties.

1. Click New CSS Rule icon in the styles panel.
2. For the selector type choose compound and for the selector name type a:link, a:visited.
   Select ok.
3. Select the attributes you want the links to have.
• For this demonstration I used the following;
  Border: 2px outset #443ff3
  Background: #443ff3

Now

We can modify the colors or backgrounds slightly for the a:focus and a:hover
selectors so that the buttons change appearance when they get the focus or are pointed at.

1. Click New CSS Rule icon in the styles panel.
2. For the selector type choose compound and for the selector name type a:focus, a:hover. Select ok.
3. Select the attributes you want.
• For this demonstration I used the following;
  Background:#308fa3
  Border: 2px outset #300766
  Color: black

Last

below is the completed CSS code for the roll over buttons that are displayed to the right



If desired, select a third style for buttons when they're activated by setting the
CSS for the a:active selector which would allow you to have the box change
color while it is selected.

1. Follow the same process as before in creating a CSS style.
• For this demonstration I used the following;
  Background: #fc65e3
  Border : 2px outset #98f600