The Image Button component

The Image Button component is a button with three visual states:
  • Up Image - the default image when the user isn't interacting with the button
  • Over Image - the image when the user's cursor is hovering over the button
  • Down Image - the image when the user clicks the button

This lets you create a visually reactive button simply by specifying three images.

To use the Image Button component in your project:

  1. Open the Components panel, then the Interaction folder.
  2. Drag the Image Button  component to the stage.
  3. In the Image Button properties section of the Properties panel, enter the URLs for Up Image, Over Image, and Down Image. If the image source file is local, click the Browse  button in the field to select the image from your computer file system.

Properties

Property Description
Name The component name.
Up Image The URL for the button image in the unpressed state. This can reference an external URL ("https://www.google.com/example.jpg") or an asset in the Library ("assets/example.jpg"). Can be bound to dynamic data.
Over Image The URL for the button image in the mouseover or hover state. This can reference an external URL ("https://www.google.com/example.jpg") or an asset in the Library ("assets/example.jpg"). Can be bound to dynamic data.
Down Image The URL for the button image in the pressed state. This can reference an external URL ("https://www.google.com/example.jpg") or an asset in the Library ("assets/example.jpg). Can be bound to dynamic data.
Background The color that's visible if an image is smaller than the component area. Can be bound to dynamic data.
Alignment

How the image is aligned within the component:

  • center
  • bottom
  • bottom left
  • bottom right
  • left
  • right
  • top
  • top left
  • top right
Scaling

How to display an image if it's a different size than the component:

  • Resize image to fit - Scale the image as large as possible within the component area without cropping or stretching.
  • Crop image to fill - Scale the image as large as possible to fill the component area without stretching the image, cropping the image either vertically or horizontally.
  • None
  • Stretch image to fill - Display the full image within the entire component area.
Disabled Disables the button. Unchecked by default.

Events and actions

Events sent by the Image Button component

You can trigger other actions based on the following Image Button component event:

Event Description
Image Button loaded Sent when all of the button images have loaded.

To select one of these events in the Event dialog, set the Image Button component as the target.

Actions performed by the Image Button component

The following Image Button component actions can be triggered in response to other events:

Action Configuration options
Toggle enable none
Set images
  • Up image source - URL of the new Up Image.
  • Over image source - URL of  the new Over Image.
  • Down image source - URL of the new Down Image.

When you select one of these actions in the Event dialog, set the Image Button component as the receiver.

Learn how to configure events.

Preview

This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper right corner.

Was this helpful?
How can we improve it?