A Button layer combines a text label, a background, and an optional icon in one editable element. Use it for calls to action such as Learn more, Shop now, or Discover offers, then customize its appearance to match your design.
This guide covers the Button layer settings, how its alignment works, and how to prepare it for different text lengths and formats.
Add a button layer
Open your design in the Design Builder.
Click Button in the top toolbar, or press B when you are not editing a text field.
Select the new button on the canvas or in the Layer manager.
Open the Styles tab in the right-hand panel to customize it.
Under Layer settings, you can rename the layer, adjust its opacity, hide it, or duplicate it. A clear name, such as cta_button, makes it easier to identify when you generate variations.
Use Layout to adjust the layer's position, width, height, and rotation. Its alignment controls position the layer relative to the format canvas.*
Customize the button text
Expand Button Text to edit the label and its typography:
Content: enter your call to action. You can also insert line breaks for a label on multiple lines.
Font: choose a font from the available font library, including Google and custom fonts.
Weight: select a weight or italic variant supported by the chosen font.
Size: set the font size in pixels.
Color: apply a solid color or a gradient to the text.
Line height: adjust the spacing between lines, as a percentage.
C spacing: increase or decrease the spacing between characters.
Decoration: choose no decoration, underline, strikethrough, or diagonal strikethrough. When a decoration is enabled, use Deco Color to set its color.
Case: keep the original capitalization, or apply uppercase, lowercase, or title case.
Alignment: align the text left, center, or right. This is especially useful for labels with multiple lines.
To create gradient text, open Color and select Gradient. Choose the direction, set the colors and their positions, and use Add stop if you need another color transition.
Style the background and spacing
Background color
Open Color to choose a Solid fill or a Gradient. The color picker lets you enter precise color values using Hex or RGB and adjust opacity. For a gradient, choose its direction and color stops.
Corner radius
Use Radius to control how rounded the corners are. Choose between:
One radius for all corners: keep the shape evenly rounded.
Separate corner values: adjust the top-left, top-right, bottom-left, and bottom-right corners independently.
Padding
V padding: the space above and below the content.
H padding: the space to the left and right of the content.
Padding helps the label and icon sit comfortably inside the background. Increasing it also increases the space the button needs.
Align the button inside its layer
The selection box and the colored button serve different purposes. The layer's bounding box defines the available area, while the visible button is sized around its text, icon, and padding. A larger bounding box does not automatically stretch the background to fill it.
Under Button Alignment, combine a horizontal position (left, center, or right) with a vertical position (top, middle, or bottom).
For example, choose right + middle to keep the button against the right edge of its bounding box. When you replace “Learn more” with “Discover offers,” the button can become wider while keeping that right edge aligned, provided the content fits inside the available space.
Tip: Use Layout to position the layer on the canvas, Button Alignment to position the button inside that layer, and Button Text → Alignment to align the text lines inside the button.
Learn more about layer alignment and positioning.
Add an icon
Turn on Button Icon.
Click Select image and choose an image from your computer or a URL.
Choose whether the icon appears to the left or right of the text.
Adjust Gap to set the distance between the icon and label, and Size to scale the icon as a percentage.
The selector supports JPEG, PNG, SVG, and WEBP, with a maximum file size of 20 MB. To replace an existing icon, click Update image.
For an SVG icon, SVG color offers two options:
Original: keep the colors from the uploaded SVG.
Custom: apply the color you choose in the panel.
Tip: Use an SVG when you want to recolor the icon directly in the builder. Check its contrast against the button background, especially when switching between light and dark colors.
Handle different text lenghts
When you use different calls to action or translations, turn on Text auto resize and choose a Type:
Keep text size: preserve the font size you set. Text that cannot fit may cause a generation error.
Shrink to fit: reduce the font size only when the text needs more room. The Size field in this section sets the minimum allowed font size.
Always fit: allow the font size to grow or shrink to fit the available area.
The Size under Button Text is your starting font size. The Size shown under Shrink to fit is its lower limit. Keep that minimum large enough to remain readable.
Important: Automatic text resizing is applied during generation, not in the live Design Builder preview. Generate a sample to check the final result.
See Text Auto Resize for more on generation behavior.
Add a border and shadows
Three independent effects are available below the text resizing settings:
Button Border: adds an outline around the button background. Set its Width and Color.
Button Shadow: adds a shadow behind the button. Adjust Blur, X offset, Y offset, and Color.
Text Shadow: adds a separate shadow behind the label, with its own Blur, X offset, Y offset, and Color.
Turn on only the effects you need. A subtle button shadow can separate the call to action from the design background; a text shadow affects the lettering itself. Use the shadow color's opacity to control its strength.
Check your formats and save
For a design with several formats, review the button's position, bounding box, and text readability in each one.
If you want new style changes to apply across formats, enable Synchronize style before making those edits. It does not retroactively copy previous changes, and positions and dimensions remain format-specific. See Synchronize Style in the Design Editor.
In an animated design, you can also open Animation → Add animation to add Fade, Slide, Scale, or Rotate effects to the button. See Creating and Customizing Animated Designs for the animation workflow.
When you are ready:
Open Save & Generate and choose Save & exit.
Confirm with Save design when prompted.
Generate samples using your shortest and longest labels, including translations if relevant.
Check the generated results in every target format before producing the full set.
Frequently asked questions
Why doesn't my button fill the entire selection box?
The visible background follows the label, icon, and padding. Use Button Alignment to place it within the available area. Increase padding if you want more space around the content; changing the layer's width alone does not create a full-width background.
What should I change if the label does not fit?
Give the layer more width or height, shorten the label, reduce padding or the icon gap, or allow a smaller minimum font size with Shrink to fit. After editing the label in the builder, check the layer dimensions again and generate a sample to confirm the result.
Does a button layer create a clickable link?
A Button layer creates the visual call to action. A PNG or JPEG does not contain an interactive button; its destination is configured in the website, email, or advertising platform where you use the image.
For HTML5 banners, click behavior is handled through the banner's export and ClickTag settings. See Understanding HTML5 Export Settings.