• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Drawing a Button

Now that the images are all prepared for the project, it’s time to start the button-building process. A button is a form element—referred to as a field. In this project, however, we aren’t using buttons for form building, like those used in Chapters 9 and 10. We’ll use buttons here because of their ability to respond to users’ mouse actions in interesting ways. The easiest way to approach button building is in batches. Amanda will draw and configure the first button and then add the rest.

Buttons commonly change appearance when you move the pointer over them, and they may change yet again when you click them. These changes are called button states. A button that uses Up, Over, and Down button states is a three-state button. The button states are named in reference to how they appear on the document:

  • Up—before you interact with the button

  • Over—when you mouse over the button

  • Down—when you click the button


Open and close toolbars as you are working in Acrobat to save time clicking through program menus. To quickly open a toolbar, right-click/Control-click the toolbar well and choose the toolbar from the menu; in this case, the Advanced Editing toolbar.

In the project, Amanda uses only the Up and Over button states. This means the buttons appear one way on the document when viewers see it, and another way when they mouse over the button. Nothing happens to the button’s appearance when viewers click a button.

Acrobat includes four different button behaviors. The Push button behavior lets you configure different states for the buttons and is used in this project. The other button behaviors are None, which does nothing when users interact with it; Outline, which highlights the outline of the button when clicked; and Invert, which flashes the reverse of the button’s color when clicked.

Download the button.pdf file to create the button for the project.

The first buttons to add are the hotspot buttons that viewers can click to see the text and image pop-ups.

Follow these steps to draw the first button:

Choose Tools > Advanced Editing > Forms > Button Tool. Or click the Button tool on the Advanced Editing toolbar; it is the Forms tool shown by default on the toolbar.

Drag a marquee on the page where you want to place the button (Figure 4.6). Release the mouse; the Button Properties dialog opens to the General tab. A button is named Button1 by default.

Figure 4.6. Drag the Button tool to draw a marquee on the document where you want to place the button.

Name the button if you are using a custom naming system; the first button added to the sample project is the b_cruise button (Figure 4.7).

Figure 4.7. Name the button and choose other general characteristics in this pane of the dialog.

There is no right or wrong approach to which button to start with: Amanda started with this button because she intends to add each group of images to the buttons in alphabetical order.


In addition to naming the button and designing its appearance, you can also add a tooltip that displays when users move their pointers over the button on the page; in the project, it isn’t necessary because the pop-ups will display information.

Select the Appearance tab, and define how the button will look by choosing colors for borders and backgrounds, as well as selecting font characteristics. Amanda’s buttons don’t use text or background colors. If you are starting with the program’s default settings, you see both a border and background color in the color swatches. Click the Border Color color swatch and select No Color from the standard color palette; repeat with the Background Color.


If you want to use color for the borders or backgrounds, select one from the respective standard color palette. Or, you can click Other Color to open a Color dialog to choose a custom color. In Figure 4.8, the color options for the Background Color are shown.

Figure 4.8. Choose options to define the appearance of the button, including standard and custom colors for the background and borders.

Click the Options tab to display settings for defining the button’s behavior and choosing its content (Figure 4.9).

Figure 4.9. Select characteristics for the button’s content in the Options pane.

Click the Layout pull-down arrow and choose Icon Only from the list. You can also choose different combinations of Label (which is text you type on the dialog) and Icon (an image) options from the list. In the project, you use an icon only. When you select an Icon option, the Advanced button is activated.

Click the Behavior pull-down arrow and choose Push from the list. A Push button is the only button you can construct in Acrobat that uses different configurable states. You need a three-state button to create the pop-ups.

Click Choose Icon to open the Select Icon dialog (Figure 4.10). Click Browse to display an Open dialog.

Figure 4.10. The image you choose for the button is displayed in the dialog.

Locate and select the image or PDF file you want to use for the button, and click Open to dismiss the dialog and show a preview of the image in the Select Icon dialog. Click OK to dismiss the dialog; a thumbnail of the image displays on the Options pane of the Button Properties dialog, shown in Figure 4.9.

Click Close to close the Button Properties dialog and complete the button. The button and its content is shown on the document with a bounding box and the overlying button name (Figure 4.11).

Figure 4.11. A button object shows the name and its bounding box as well as the content on the document.

Click the Hand tool on the Basic toolbar to deselect the Button tool. You can’t see the finished button without its bounding box and over-lying name when the Button tool is active.

The Button Properties dialog also contains the Actions tab, used for setting different activities that occur when users interact with the button, such as opening a pop-up when a button is clicked. We’ll add the actions after all the buttons are built.

Button States

Acrobat’s default button behavior is None, which is fine for some situations but not very attractive. Instead of configuring custom buttons like those used in this project, you can create simple buttons with a bit of pizzazz. Use the Outline behavior, which highlights the button’s border when the button is clicked, or the Invert behavior, which reverses the dark and light colors in the button when clicked.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint