---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/button'
title: 'Adding a Button | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:26:33+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Call-to-action button'
tags:
  - Marketing
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding a Button'
      description: 'Call-to-action button'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:26:33+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/button'
      articleSection: Marketing
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/button'
      description: 'Call-to-action button'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Marketing](/hc/documentation/learn-dxpr-builder/elements/marketing) # Adding a Button.

Call-to-action button

 Learn DXPR BuilderBuild pagesAdd contentMarketing

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You get a clear call-to-action button that sends visitors where you want them to go. Use it to lead people to a sign-up form, a product page or a contact page.

## Add a button

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Button**. It lands at the top of the column and its settings dialog opens.
2. Replace the default text in **Title** with your button label.
3. Enter the destination in **Link**, such as `/contact` or `https://example.com`.
4. Choose a colour under **Type**. Here we pick **Success**.
5. Choose the **Size**. Here we pick **Large**.
6. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

A button with the label you typed appears at the top of the column. In the video, it is large and green and reads Register for Open Day. Links do not open while you edit. To test yours, save the page, choose **Preview** in the toolbar's view menu and click the button. Visitors see it once you save the page and it is published.

## Set up your button

Hover the element and open **More > Settings** in its control bar. Options:

- **Title:** the text on the button.
- **Link:** where the button goes: a path on your site, such as `/contact`, or a full URL.
- **Link target:** opens the link in the Same window or a New window. It shows once **Link** has a value.
- **Type:** the colour style: Primary, Secondary, Success, Info, Warning, Danger, Link, Light or Dark.
- **Block button:** stretches the button across the full width of the column.
- **Outline style:** shows a coloured border and text with no fill. The Link type has no outline and always looks like a text link.
- **Size:** Normal, Large or Small.

## If you don't see it

- **Button is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **A click leads to "page not found".** The **Link** path is wrong. Paths on your site start with `/`, such as `/contact`. Hover the element and open **More > Settings** to fix it.
- **The button looks different from the video.** Its look comes from **Type**, **Outline style**, **Block button** and **Size**. Hover the element and open **More > Settings** to check them.
- **The link opens in the same tab.** **Link target** is Same window. Fill in **Link** first, then pick New window.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your button.