Now that we have completed the stretchy part, we can create the mouse over effects.

Copy the button to the Clipboard by pressing Ctrl c or Edit > Copy. Open up the Object Gallery (formerly the Layer Gallery—F10). Press New and create a new layer, MouseOver and make this layer visible and the selected layer (the large dot indicates the current layer). Click the title bar to select the MouseOver layer. Paste a copy of the button directly on top by selecting Edit > Paste in Place or by pressing Shift Ctrl v.

The MouseOver layer now contains an exact duplicate of the stretchy button. Change the fill to the lighter version of the Theme Color. (Ctrl click on the bottom of the grouped rectangles to select just one of the rectangles and change the color).

At this point we need to add a link to the new button so that we can preview the mouse over effects. Mouse Over button effects have to have a link for them to work in preview. Any link will do for the preview. You can change the link later as needed.

In the Object Gallery (F10) make sure that both Layer 1 and MouseOver layers are visible and editable. Select both buttons and from the Arrange menu select Apply Soft Group. A Soft Group groups two or more objects (in this case, the MouseOff and MouseOver layers) and causes the Soft Group to act as one single button. If you change the text on one layer, the text on both layers changes automatically. This also applies to the text’s fill color, style, font, and size.

After you have created a soft group, open the Link dialog (shown above) and from the Link to Page drop down list, select index, which is currently the only page. You can change this link later as appropriate. But for now you just want to test the mouse over effects so add a link to index, and press Apply.

Press the Export & Preview Website button. Xtreme opens a browser window in which you can see if your mouse over effect is working.

Here’s a screen capture (using Xtreme 5’s new Screen Capture utility. Notice too how the amount of space on either side of the text on each button is the same.

And that’s all there is to it. If it were any easier it wouldn’t be any fun!

I would love to hear your comments and questions. Just send me an e-mail using the link below.

Eric Butters
Send e-mail