Buttons are a great way to add interactivity to your project. You can use buttons to trigger events based on user interaction. Additionally, you can use buttons to direct users to external websites and social pages.

Adding a Button

To add a button to your scene, select the Button icon from the Components Panel and drag the desired button onto your canvas. Designer includes a number of preset button designs for you to choose from, as well as a number of social media styled buttons, which are pre-filled with the appropriate starting URL.

Adding a Button component to an AR scene

Editing a Button

When you select your button in the canvas, the properties are editable via the Properties Panel.

Editing a Button component in an AR scene

Here, you can edit the following:

Property Description
Transforms Edit the Size (Width and Height), Position (X/Y/Z coordinates), and Rotation (degrees on the X/Y/Z axes) of the Button. You can also change the component's layer Order (forwards or backwards) relative to other scene components.
Curve Add a curve to the Button and choose whether its curve direction is None, In or Out, as well as the degree of Curvature. You can also have it Wrap around a curved target if there is one present. See the Curved Image Tracking documentation for more.
Appearance Edit the Corner radius, Fill color, Border width and Border color properties of the Button.
Gradient Customize your Button by adding a Linear Gradient background and using the Color Picker to choose the two Colors.
Text Customize how text is displayed on the Button, including its Font, Height, Color and Alignment.
Actions Create interactivity by adding an on tap Action to the Button.
Transition Effects Add an Enter or Exit transition effect to the Button.

To learn how to add interactivity to Button components, check out our Actions article.

zapcode branded_zapcode i