---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/button-styles'
title: '选择引导访客的按钮样式 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:42:27+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  每个按钮的分量由您决定。实心按钮标出您最想要的动作，旁边的描边按钮提供备选而不抢戏。本页演示如何装饰这样一对按钮，以及每个设置改变什么。添加按钮并设置链接，请参阅 添加按钮。
  该视频跟随下文步骤：将 Apply now 做成主按钮，再添加描边的第二个按钮。
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-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 选择引导访客的按钮样式
      description: |-
        每个按钮的分量由您决定。实心按钮标出您最想要的动作，旁边的描边按钮提供备选而不抢戏。本页演示如何装饰这样一对按钮，以及每个设置改变什么。添加按钮并设置链接，请参阅 添加按钮。
        该视频跟随下文步骤：将 Apply now 做成主按钮，再添加描边的第二个按钮。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:42:27+0000'
      dateModified: '2026-10-24T17:19:22+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/zh-hans/hc/documentation/learn-dxpr-builder/design/button-styles'
      articleSection: 设计指南
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/button-styles'
      description: |-
        每个按钮的分量由您决定。实心按钮标出您最想要的动作，旁边的描边按钮提供备选而不抢戏。本页演示如何装饰这样一对按钮，以及每个设置改变什么。添加按钮并设置链接，请参阅 添加按钮。
        该视频跟随下文步骤：将 Apply now 做成主按钮，再添加描边的第二个按钮。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[设置元素样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings) /[设计指南](/zh-hans/hc/documentation/learn-dxpr-builder/design/overview) # 选择引导访客的按钮样式.

 学习 DXPR Builder搭建页面设置元素样式设计指南

   ## 本指南内容

 相关指南

- [添加按钮](/zh-hans/hc/documentation/learn-dxpr-builder/elements/button)
- [让元素随悬停响应](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects)
- [使用品牌颜色](/zh-hans/hc/documentation/learn-dxpr-builder/design/colour-and-branding)

每个按钮的分量由您决定。实心按钮标出您最想要的动作，旁边的描边按钮提供备选而不抢戏。本页演示如何装饰这样一对按钮，以及每个设置改变什么。添加按钮并设置链接，请参阅 [添加按钮](/zh-hans/hc/documentation/learn-dxpr-builder/elements/button)。

该视频跟随下文步骤：将 Apply now 做成主按钮，再添加描边的第二个按钮。

  ## 装饰主按钮和次按钮

从页面上的按钮开始，例如 **Apply now**。

1. 悬停按钮，打开 **More > Settings**。
2. 将 **Type** 设为 **Primary**。
3. 将 **Size** 设为 **Large**，点击 **Save**。
4. 再次悬停按钮，打开 **More > Clone**。副本出现在原按钮正下方。
5. 打开副本的 **More > Settings**。更改其 **Title**（例如 `Download brochure`）和 **Link**。
6. 打开 **Outline style**，点击 **Save**。
7. 点击工具栏上的 **Save**。

## 为每个动作选样式

| 动作 | 样式 | 示例 |
|---|---|---|
| 您最想要的动作 | 实心 **Primary** | Apply now |
| 备选动作 | **Outline style**，采用同一 **Type** | Download brochure |
| 次要动作 | **Link**，看起来像文本链接 | Read the terms |
| 警告或最后一步 | **Danger** 或 **Warning** | Cancel my booking |

每个版块用一个实心按钮，访客一眼就知道点哪里。标签写明会发生什么：“Get started”而不是“Click here”，“Send message”而不是“Submit”。

## 您会看到的内容

两个大按钮在列中上下排列：实心按钮用主题的主色，描边按钮用同色边框和文字。实心按钮先抓住眼球。编辑时链接不打开。要测试它们，请保存页面，打开视图菜单（眼睛图标）并选择 **Preview**。

## 设置

| 设置 | 作用 | 默认值 |
|---|---|---|
| **Type** | 颜色样式：**Primary**、**Secondary**、**Success**、**Info**、**Warning**、**Danger**、**Link**、**Light** 或 **Dark**。颜色来自主题。 | **Primary** |
| **Outline style** | 有色边框和文字，无填充 | 关 |
| **Size** | **Normal**、**Large** 或 **Small** | **Normal** |
| **Block button** | 将按钮拉伸到占满整列宽度 | 关 |
| **Link target** | **Same window** 或 **New window**。**Link** 有值后才显示。 | **Same window** |

给主题制作者：每个 **Type** 添加 Bootstrap 类 `btn-<type>`，例如 `btn-primary`。**Outline style** 开启时变成 `btn-outline-<type>`，**Link** 除外，它始终是 `btn-link`。**Large** 添加 `btn-lg`，**Small** 添加 `btn-sm`，**Block button** 添加 `btn-block`。

## 如果您看不到样式

- **描边按钮没有边框。** **Type** 为 **Link**，它始终像文本链接，因此 **Outline style** 无效。请为描边按钮选择其他 **Type**。
- **按钮几乎看不见。** **Light** 接近白色，在白色版块中隐身。请选择更深的 **Type**，或给版块加背景色。
- **链接在同一标签页打开。** **Link target** 为 **Same window**，且只在 **Link** 有值后显示。请先填写 **Link**，再选择 **New window**。

## 接下来做什么？

- [添加按钮](/zh-hans/hc/documentation/learn-dxpr-builder/elements/button)：每个按钮设置，带视频。
- [悬停效果](/zh-hans/hc/documentation/learn-dxpr-builder/design/hover-effects)：指针到达时让按钮变暗或加阴影。
- [颜色与品牌](/zh-hans/hc/documentation/learn-dxpr-builder/design/colour-and-branding)：让按钮颜色与品牌一致。