Adding interactive buttons

Microsoft Expression Web makes it easy for you to add buttons to your 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 site, 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 pages, Expression Web will prompt you to also save the button image files.

Important

Be sure to save your button images inside your site folder (with your other site files) or the button images won't be published.

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

Tasks

Create a page transition effect
Adding behaviors

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.