Button

To add a button, navigate to Basic Modules and choose the desired button you want to add.

There are 3 predefined types: 

Button
Two Buttons
Wide Button

We will jump through all of them to show what better suits your needs.

Initially, if the layout is empty, you’ll be prompted with the module selection panel - this helps you start by choosing a module.

Once you’ve added at least one module, the left panel switches automatically to show the Layout view. This gives you a clear visual of the elements you’re working with.

To add more modules at any time: Click the plus (+) button in the top bar – this opens the module picker again.

Button

The button itself is wrapped in a module to give you more freedom to play around with the options. After making all the changes, you can save it as your custom module to reuse it.

By default, after selecting the Button module, on the right side will be displayed all available options to customize the chosen module.

To change the text button, you’ll need to press twice on the “Read More” label.

You’ll see also that the right panel changed the options, and this means that you are currently just inside the element, in fact in proper button options.

Refer to the image above to identify the supported button options, and refer to the sections below to learn how to use and apply them.

View options (Desktop, Mobile)
Alignments
Positioning and sizes
Link
Text
Icon
Background Color
Border
Shadows
Anchor
Hiding options

1. View options (Desktop, Mobile)

This option gives the possibility to switch viewing from Desktop to Mobile or vice versa, use the keyboard shortcut M to switch instantly.

While editing in Mobile view, any settings (described below) you apply will override the Desktop settings. This allows your design to adapt fluidly between devices without duplicating content.

Note: Only the content itself, such as text and links - remains consistent across views. This separation enables a fully mobile-optimized design, without affecting how it appears on desktop.

2. Alignments

By default, the button is left-aligned, which is standard for right-to-left (RTL) languages.

This is the position when center alignment is selected.

And this is the position when right alignment is selected.

3. Positioning and sizes

By default, there are some padding units applied to give the button more aesthetics, but do not feel constrained, play as much as you want with the options.

In this section you will find 3 options:

Margins and paddings
Sizes
Corner radius

Positioning (Margins and Paddings)

Margin is the space outside an element. It creates distance between the element and others around it. Padding is the space inside an element, between its content and the border.

Use margin to control layout spacing, and padding to improve readability and visual comfort within an element.

Sizes

When width (↔) is set to Auto, the button resizes to fit its content (text or icon) plus any horizontal padding. This ensures the button isn’t too wide or too narrow, it adjusts naturally based on what’s inside. You can still manually set a specific width (e.g. 200px, 50%) if you want the button to have a fixed or relative size, Auto is just the default behavior.

The height (↕) is typically not set manually, it stays as auto. That’s because the vertical size of a button is controlled by padding (top and bottom) which makes it flexible and keeps the text vertically centered without needing a fixed height.

This approach keeps buttons responsive, accessible and visually balanced across screen sizes.

Corner radius

Corner radius (or border-radius) controls how rounded the corners of a button (or any element) appear.

A value of 0 means sharp, square corners.

Increasing the value (e.g. 4, 8, 100) makes the corners more rounded. A high value like 100 creates a fully circular shape - useful for round buttons.

By default, corner radius adjusts the roundness of all four corners equally, giving the button a soft, uniform look.

But if you want more control, you can choose to set each corner individually (top-left, top-right, bottom-right, bottom-left). This is especially useful when:

You want only top or bottom corners rounded (e.g. for buttons that visually attach to cards or blocks).
You want a more asymmetrical or creative layout.

Custom corner radius lets you go beyond standard styles and gives you flexibility to fit any design need.

4. Link

By default, the link option is enabled, so the button acts as a clickable link in the email.

You can enter a URL (e.g. https://postcards.email) to direct readers to an external page, or use an anchor (e.g. #section1) to jump to a specific part within the same email (supported by some email clients).

The checkbox “Open in new tab” is usually selected. This is recommended because:

It ensures readers don’t lose the email when clicking the link.
It provides a smoother experience, especially on desktop browsers.
It’s ideal when linking to external websites like blogs, products, or sign-up pages.

If the checkbox is disabled, the link may open in the same tab, which could interrupt the reading flow.

An anchor link allows the button to scroll to a specific section within the same email - like jumping down to a “Contact” or “Offers” module.

Note: This feature works only in a few email clients (like some versions of Apple Mail or web-based clients). Most popular ones, including Gmail and Outlook, might not support scrolling to anchors, so behavior may not be consistent.

You can select an anchor only if at least one anchor has already been added in the email content.
If no anchors exist, this option will be disabled.
For reliable performance, we recommend using full URLs for external links and anchors only for very specific cases where you know the target email clients support them.

5. Text

While you can customize fonts, not all email clients support custom fonts. In those cases, the text will fall back to a predefined list of safe fonts (like Arial, Georgia, or Verdana) that work across most platforms.

You can play around with those options as well:

Font family
Font weight (e.g. regular, bold)
Font size to control how large the text appears
Line height to improve readability and vertical spacing
Letter spacing to fine-tune space between characters
Font color, to match your brand or design
Opacity, to make text more subtle or transparent when needed

To use custom fonts, click the menu icon and select the "Custom Fonts" option. A popup will appear, allowing you to choose from the available options.

Text alignment controls how the text is positioned inside the button or text block:

Left: Text starts from the left edge (default for most languages).
Center: Text is centered horizontally.
Right: Text aligns to the right edge.
Justified: Text stretches to fill the full width, spacing out words evenly (rarely used in buttons but common in paragraphs).

Alignment differences are most noticeable when the button has a fixed width (e.g. 200px) instead of Auto width.

You can also control font case: All letters become capitalized.

Underline: Adds a line below the text, often used for links.
Strikethrough: Adds a line through the text, usually to indicate deletion or discount.

Alongside the common formatting tools, there are also a few advanced or rarely used options available in some editors:

Subscript and Superscript - These reduce the text size and shift it below (subscript) or above (superscript) the baseline. Often used in scientific or mathematical notation (e.g. H₂O, x²)
Unordered (bullet) and numbered lists are not available inside buttons - and for good reason: A button is designed for a single, clear call to action (e.g. “Buy Now”, “Learn More”).
Clear formatting - This resets all styling (font, size, weight, colors) and lets you start from scratch with clean, default text. It’s especially helpful when pasting text from other sources that brings unwanted formatting.

6. Icon

To add an icon, toggle the Icon option to on - it’s disabled by default.

When the Icon toggle is turned on, you’ll see two options:

Upload: This allows you to instantly upload an image from your device. You can use any image you like - perfect for adding custom icons.
Direct URL: Ideal if you already have your brand assets hosted online. Just paste the image link and it will load directly into the button.

Both methods work smoothly and are easy to use.

The icon’s size is set to auto by default and scales based on the font size, so it stays visually balanced. There are no strict limits, so feel free to experiment and adjust until it fits your style.

7. Background Color

By default, the background color is enabled for the button.

You can customize it in two ways:

Enter a specific HEX color code if you know the exact color you want (e.g. #FF5733).
Or simply drag around the color picker to explore and choose from the full color spectrum.

Need a more subtle look?

You can also adjust the opacity to make the background more transparent, useful for lighter visual styles.

Feel free to experiment until it fits your design perfectly.

8. Border

By default, the border is turned off.

When you switch the toggle on, a 1px solid border is applied automatically. You can then customize its:

Width (e.g. 2px, 4px)
Style (Solid, Dotted, and Dashed)
Color, to match or contrast with your button

Note: The border is applied to the outside of the button, so it may slightly increase the overall size.

Borders can be useful for:

Adding contrast on minimal or transparent buttons
Matching your brand’s visual style
Creating outlined button styles (often used for secondary actions)

You also have the option to customize each border side individually (top, right, bottom, left).

This is helpful when:

You want to highlight only one side (e.g. bottom border for a minimalist underline effect)
You’re trying to visually align the button with other elements (e.g. matching a border with the edge of a container)

Not happy with the result or want to disable the border entirely?

No problem, just set the border size to 0 and press Enter, and it will be removed.

9. Shadows

There are two types of shadows you can apply to buttons:

Box Shadow adds a shadow behind the entire button, giving it depth or a floating effect.
Text Shadow applies a shadow directly behind the button’s text, helping it stand out.

Both shadow options are enabled by default, but they start with zero values, meaning no visible effect until you adjust the settings.

To make the shadow visible, you can tweak:

X offset – how far the shadow moves horizontally
Y offset – how far it moves vertically
Blur – how soft or sharp the shadow appears
Color – choose any tone to match or contrast your design
Opacity – control how strong or subtle the effect is

Note: Shadow effects are mostly visual and may not appear the same everywhere. Support is limited in some email clients, including Outlook, Gmail, and Windows 10 Mail, where shadows may not render properly or at all.

So while shadows can enhance the look and feel, it’s good practice to not rely on them for essential contrast or readability.

10. Anchor

As mentioned earlier in the Link options, anchors allow you to create internal navigation by enabling buttons or links to scroll to specific sections within the same email.

In this section, you can create an anchor by naming a specific spot in your content, for example, “pricing” or “top”.

Later, you can link to it using #pricing from a Link.

Note:

Anchors only work in a few email clients (such as Apple Mail or some web-based clients).
Major platforms like Gmail, Outlook, and Windows Mail do not support anchor scrolling, so this feature won’t function for all recipients.

Use anchors for subtle in-email navigation when targeting clients that support them, but avoid relying on them for critical actions.

11. Hiding options

Sometimes, based on your design or client needs, you may want a button to appear only on mobile or only on desktop.

The Hiding options allow you to control exactly that:

Choose to hide the button on mobile, desktop, or show it on both.
This is useful when you want to tailor content for different screen sizes - for example, showing a larger button on mobile or hiding duplicate actions on smaller layouts.

You can quickly spot hidden elements using the keyboard shortcut M, as shown in the View Options.

This gives you more flexibility in your layout, keeping the design clean and responsive without removing content entirely.

Two Buttons

The Two Buttons module simply places two buttons side by side, using a grid structure.

This is useful when you want to present two related actions (like “Learn More” and “Buy Now”) in a balanced and aligned way.

Behind the scenes, the module uses a 2-column grid layout, where each button sits in its own column.

This ensures that:

Both buttons stay aligned
They scale properly across devices
And spacing between them remains consistent

This module keeps your layout clean while offering multiple calls to action side by side.

Wide Button

The Wide Button module is a single button that automatically stretches to 100% width of its container.

It’s ideal when you want:

A strong, attention-grabbing call to action
A design that works well on both desktop and mobile
A button that spans the entire available space, offering visual balance and simplicity

This module ensures the button stays fully responsive and always aligns with the layout’s width, making it perfect for primary actions in minimal or mobile-friendly designs.

Add more buttons (elements)

In addition to using the main plus (+) button in the top bar, you can also add elements directly within the Layers panel on the left.

While navigating through the Layers structure, hovering above or below a specific element will reveal a small plus (+) button.

Clicking it will prompt a bubble of available elements that can be inserted in the exact position - for example, you can quickly add another Button inside the same module below the existing one.