Add or remove an interactive button

Microsoft Expression Web makes it easy for you to add buttons to your Web pages that resemble buttons you would expect from an advanced graphics-editing tool. You can change the appearance of these buttons without any code editing. You can change settings, such as adding button text, selecting button and background colors, and defining a hyperlink for a button. You can also specify the font style, size, and color for all states of the button including the original, hover, and pressed states. You can set the horizontal and vertical alignment, as well as change the size and proportions of the button.

After you add a button, you can link it to another page in the current website, to a site on the World Wide Web, or to an e-mail address.

When you add an interactive button, Expression Web creates image files that make up the button. When you save your web pages, Expression Web will prompt you to also save the button image files.

To add an Interactive Button

  1. In Design view, place the cursor where you want to add the button.

  2. On the Insert menu, click Interactive Button.

  3. On the Button tab, in the Buttons list, click a button style.

  4. In the Text box, type the text that you want to appear on the button.

  5. Next to the Link box, click Browse.

  6. Locate and click the file, URL, or e-mail address that you want the button to link to.

  7. Optional: In the Font tab, specify the font, font style, alignment, and various colors for the text in various button states.

  8. Optional: In the Image tab, specify the size of the images created and whether to create images for the various button states.

To delete an Interactive Button

  • Click the button in Design view to select it and press DELETE.

    Note

    When you delete a button, the files associated with that button are not deleted. You must delete the button files from the Folder List.

To set the properties of an Interactive Button

  1. Right-click the Interactive Button that you want to set the properties for, and then click Button Properties on the shortcut menu.

  2. To set the text, on the Button tab, in the Text box, type the text that you want to appear on the button.

  3. To set the font, on the Font tab, select the font properties that you want.

  4. To set the destination, on the Button tab, in the Link box, locate and click the file, URL, or e-mail address that you want the button to link to.

  5. To set the button background, on the Image tab, do one of the following:

    • To match the background of the button to a Web page with a solid background, click Make the button a JPEG image and use this background color, click the arrow on the list, and then click a color that matches your Web page.

    • To match the background of the button to a Web page with a varied background, click Make the button a GIF image and use a transparent background.

  6. To set the size of the image, on the Image tab, do one or both of the following:

    • To set the height and width of a button, in the Height and Width boxes, type or select the pixel values that you want.

    • To maintain the aspect ratio of the button, select the Maintain proportions check box.

  7. To set the behavior, on the Image tab, do one or more of the following:

    • To display the button differently when a site visitor rests the mouse pointer on it, select the Create hover image check box.

    • To display the button differently when a site visitor clicks it, select the Create pressed image check box.

    • To load the images for the hover and clicked states of the button as the rest of the page loads, select the Preload button images check box.

See also

Concepts

Create a page transition effect

Define a behavior for an element