Search
Clear search
Close search
Google apps
Main menu

The Image Button component

The Image Button component is an element you can position on the screen that creates a button with three visual states: an unpressed ("up") image, a hover ("over") image, and a pressed ("down") image. This lets you create a visually responsive button without needing to create event-based animation for it.

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, configure the component by setting its properties (described below).

Properties

Property Description
Name Sets 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 Web Designer's Asset Library ("assets/example.jpg").
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 Web Designer's Asset Library ("assets/example.jpg").
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 Web Designer's Asset Library ("assets/example.jpg).
Background The color that's visible if an image is smaller than the component area.
Alignment

How the image is aligned within the component:

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

Determines how various sized images are displayed within the component:

  • Resize image to fit
  • Crop image to fill
  • None
  • Stretch image to fit
Disabled Disables the button. Unchecked by default.

Events

Events can be used to trigger other actions in your ad. The Image Button component sends the following event:

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

Actions

The following Image button component actions can be triggered by other events:

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

Preview

Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Was this article helpful?
How can we improve it?