--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/button-styles' title: 'Escolher estilos de botão que orientam os visitantes | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:47:09+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Decida o destaque de cada botão. Um botão sólido marca a ação principal, e um botão com contorno ao lado oferece a alternativa sem competir. Esta página mostra como estilizar esse par e que definição muda o quê. Para adicionar um botão e definir a ligação, consulte Adicionar um botão. O vídeo segue os passos abaixo: torna Apply now o botão principal e adiciona um segundo botão com contorno. 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: 'Escolher estilos de botão que orientam os visitantes' description: |- Decida o destaque de cada botão. Um botão sólido marca a ação principal, e um botão com contorno ao lado oferece a alternativa sem competir. Esta página mostra como estilizar esse par e que definição muda o quê. Para adicionar um botão e definir a ligação, consulte Adicionar um botão. O vídeo segue os passos abaixo: torna Apply now o botão principal e adiciona um segundo botão com contorno. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:47:09+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/pt-pt/hc/documentation/learn-dxpr-builder/design/button-styles' articleSection: 'Guias de design' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/button-styles' description: |- Decida o destaque de cada botão. Um botão sólido marca a ação principal, e um botão com contorno ao lado oferece a alternativa sem competir. Esta página mostra como estilizar esse par e que definição muda o quê. Para adicionar um botão e definir a ligação, consulte Adicionar um botão. O vídeo segue os passos abaixo: torna Apply now o botão principal e adiciona um segundo botão com contorno. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) /[Guias de design](/pt-pt/hc/documentation/learn-dxpr-builder/design/overview) # Escolher estilos de botão que orientam os visitantes. Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design ## Neste guia Guias relacionados - [Adicionar um botão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/botao) - [Tornar os elementos reativos ao pairar](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/efeitos-ao-pairar) - [Utilizar as cores da marca](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/cores-e-marca) Decida o destaque de cada botão. Um botão sólido marca a ação principal, e um botão com contorno ao lado oferece a alternativa sem competir. Esta página mostra como estilizar esse par e que definição muda o quê. Para adicionar um botão e definir a ligação, consulte [Adicionar um botão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/botao). O vídeo segue os passos abaixo: torna Apply now o botão principal e adiciona um segundo botão com contorno. ## Estilizar um botão principal e um segundo botão Comece com um botão na página, por exemplo **Apply now**. 1. Paire sobre o botão e abra **More > Settings**. 2. Defina **Type** como **Primary**. 3. Defina **Size** como **Large** e clique em **Save**. 4. Paire sobre o botão outra vez e abra **More > Clone**. A cópia aparece logo abaixo do original. 5. Abra **More > Settings** na cópia. Mude o **Title**, por exemplo para `Download brochure`, e o **Link**. 6. Ligue **Outline style** e clique em **Save**. 7. Clique em **Save** na barra de ferramentas. ## Escolher um estilo para cada ação | Action | Style | Example | |---|---|---| | A ação principal | Sólido **Primary** | Apply now | | Uma alternativa | **Outline style** no mesmo **Type** | Download brochure | | Uma ação secundária | **Link**, que parece uma ligação de texto | Read the terms | | Um aviso ou um passo final | **Danger** ou **Warning** | Cancel my booking | Use um botão sólido por secção, para os visitantes verem de imediato onde clicar. Escreva etiquetas que dizem o que acontece: "Get started" em vez de "Click here", "Send message" em vez de "Submit". ## O que vê Dois botões grandes empilham-se na coluna: um sólido com a cor principal do tema e um com contorno com borda e texto na mesma cor. O sólido atrai primeiro o olhar. As ligações não abrem enquanto edita. Para as testar, guarde a página, abra o menu de vista (o ícone de olho) e escolha **Preview**. ## Definições | Setting | What it does | Default | |---|---|---| | **Type** | O estilo de cor: **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light** ou **Dark**. As cores vêm do tema. | **Primary** | | **Outline style** | Borda e texto coloridos sem preenchimento | Off | | **Size** | **Normal**, **Large** ou **Small** | **Normal** | | **Block button** | Estica o botão por toda a largura da coluna | Off | | **Link target** | **Same window** ou **New window**. Aparece quando **Link** tem um valor. | **Same window** | Para quem trabalha com temas: cada **Type** adiciona a classe Bootstrap `btn-`, por exemplo `btn-primary`. Com **Outline style** ligado, passa a `btn-outline-`, exceto **Link**, que fica sempre `btn-link`. **Large** adiciona `btn-lg`, **Small** adiciona `btn-sm` e **Block button** adiciona `btn-block`. ## Se o estilo não aparece - **The outlined button shows no border.** **Type** é **Link**, que parece sempre uma ligação de texto, por isso **Outline style** não tem efeito. Escolha outro **Type** para um botão com contorno. - **The button almost disappears.** **Light** é próximo do branco, por isso desvanece-se numa secção branca. Escolha um **Type** mais escuro, ou dê à secção uma cor de fundo. - **The link opens in the same tab.** **Link target** é **Same window**, e só aparece quando **Link** tem um valor. Preencha primeiro **Link** e depois escolha **New window**. ## O que se segue? - [Adicionar um botão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/botao): todas as definições de botão, com vídeo. - [Efeitos de pairar](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/efeitos-ao-pairar): escureça um botão ou adicione uma sombra quando o ponteiro o alcança. - [Cor e marca](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/cores-e-marca): mantenha as cores dos botões alinhadas com a marca.