--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/button-styles' title: 'Choose button styles that guide visitors | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Pick button types, outlines, sizes and widths so your main call to action stands out' tags: - 'Design guides' 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: 'Choose button styles that guide visitors' description: 'Pick button types, outlines, sizes and widths so your main call to action stands out' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+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/design/button-styles' articleSection: 'Design guides' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/button-styles' description: 'Pick button types, outlines, sizes and widths so your main call to action stands out' 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) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # Choose button styles that guide visitors. Pick button types, outlines, sizes and widths so your main call to action stands out Learn DXPR BuilderBuild pagesStyle your elementsDesign guides ## In this guide Related guides - [Button](/hc/documentation/learn-dxpr-builder/elements/button) - [Hover effects](/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Colour and branding](/hc/documentation/learn-dxpr-builder/design/colour-and-branding) You decide how loud each button is. A solid button marks the one action you want most, and an outlined button next to it offers the alternative without competing. This page shows you how to style such a pair and which setting changes what. To add a button and set its link, see [Adding a Button](/hc/documentation/learn-dxpr-builder/elements/button). The video follows the steps below: it makes Apply now the main button and adds an outlined second button. ## Style a main and a second button Start with a button on the page, such as **Apply now**. 1. Hover the button and open **More > Settings**. 2. Set **Type** to **Primary**. 3. Set **Size** to **Large** and click **Save**. 4. Hover the button again and open **More > Clone**. The copy appears right below the original. 5. Open **More > Settings** on the copy. Change its **Title**, for example to `Download brochure`, and its **Link**. 6. Switch on **Outline style** and click **Save**. 7. Click **Save** on the toolbar. ## Pick a style for each action | Action | Style | Example | |---|---|---| | The one action you want most | Solid **Primary** | Apply now | | An alternative | **Outline style** in the same **Type** | Download brochure | | A minor action | **Link**, which looks like a text link | Read the terms | | A warning or a final step | **Danger** or **Warning** | Cancel my booking | Use one solid button per section, so visitors see at once where to click. Write labels that say what happens: "Get started" rather than "Click here", "Send message" rather than "Submit". ## What you see Two large buttons stack in the column: a solid one with your theme's primary colour and an outlined one with a border and text in the same colour. The solid one draws the eye first. Links do not open while you edit. To test them, save the page, open the view menu (the eye icon) and choose **Preview**. ## Settings | Setting | What it does | Default | |---|---|---| | **Type** | The colour style: **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light** or **Dark**. The colours come from your theme. | **Primary** | | **Outline style** | A coloured border and text with no fill | Off | | **Size** | **Normal**, **Large** or **Small** | **Normal** | | **Block button** | Stretches the button across the full width of its column | Off | | **Link target** | **Same window** or **New window**. It shows once **Link** has a value. | **Same window** | For themers: each **Type** adds the Bootstrap class `btn-`, such as `btn-primary`. With **Outline style** on, it becomes `btn-outline-`, except for **Link**, which always stays `btn-link`. **Large** adds `btn-lg`, **Small** adds `btn-sm` and **Block button** adds `btn-block`. ## If you don't see the style - **The outlined button shows no border.** **Type** is **Link**, which always looks like a text link, so **Outline style** has no effect. Choose another **Type** for an outlined button. - **The button almost disappears.** **Light** is close to white, so it fades into a white section. Choose a darker **Type**, or give the section a background colour. - **The link opens in the same tab.** **Link target** is **Same window**, and it only shows once **Link** has a value. Fill in **Link** first, then choose **New window**. ## What's next? - [Adding a Button](/hc/documentation/learn-dxpr-builder/elements/button): every button setting, with a video. - [Hover effects](/hc/documentation/learn-dxpr-builder/design/hover-effects): darken a button or add a shadow when the pointer reaches it. - [Colour and branding](/hc/documentation/learn-dxpr-builder/design/colour-and-branding): keep button colours in line with your brand.