Escolher estilos de botão que orientam os visitantes.
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.
Estilizar um botão principal e um segundo botão
Comece com um botão na página, por exemplo Apply now.
- Paire sobre o botão e abra More > Settings.
- Defina Type como Primary.
- Defina Size como Large e clique em Save.
- Paire sobre o botão outra vez e abra More > Clone. A cópia aparece logo abaixo do original.
- Abra More > Settings na cópia. Mude o Title, por exemplo para
Download brochure, e o Link. - Ligue Outline style e clique em Save.
- 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-<type>, por exemplo btn-primary. Com Outline style ligado, passa a btn-outline-<type>, 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: todas as definições de botão, com vídeo.
- Efeitos de pairar: escureça um botão ou adicione uma sombra quando o ponteiro o alcança.
- Cor e marca: mantenha as cores dos botões alinhadas com a marca.