Como definir o estilo de botões

Artigo
03/04/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Existem muitas propriedades e pseudoclasses CSS que você pode usar para definir o estilo de um button. Este tópico descreve algumas das propriedades e pseudoclasses mais usadas. Ele apresenta também um exemplo de como usar a classe CSS win-backbutton, que faz parte do WinJS.

O que você precisa saber

Tecnologias

Pré-requisitos

Guia de início rápido: adicionando um botão

Propriedades CSS úteis

A CSS fornece muitas propriedades que você pode usar para definir o estilo de elementos HTML. Mas a lista dessas propriedades é longa e seria desanimador ver uma a uma. Aqui está uma lista curta das propriedades CSS que são particularmente úteis para definir o estilo do controle de button.

font-family
Especifica a fonte a ser usada no texto do botão. Este exemplo define a font-family como "Segoe UI Light".
```
<button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>
```
font-size
Especifica o tamanho a ser usado no texto do botão. Você pode usar vários formatos diferentes, como um tamanho absoluto, um tamanho relativo, um valor de comprimento absoluto ou um percentual. Para saber mais, veja a referência font-size.

Este exemplo define a font-family para 20 pontos.
```
<button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>
```

color
Especifica a cor do texto do botão.

Este exemplo mostra várias formas de definir a propriedade color.

<button id="pinkButton1" style="color: DeepPink">A button</button>
<button id="pinkButton2" style="color: #FF1493">A button</button>
<button id="pinkButton3" style="color: rgb(255, 20, 147);">A button</button>

background-color
Especifica a cor da face do botão.

Este exemplo mostra várias formas de definir a propriedade background-color.

<button id="backgroundButton1" style="background-color: Black">A button</button>
<button id="backgroundButton2" style="background-color: #000000">A button</button>
<button id="backgroundButton3" style="background-color: rgb(0, 0, 0);">A button</button>

border
Especifica a espessura, o estilo da linha e a cor da borda do botão.

Este exemplo cria uma borda sólida de 2 pixels ao redor do botão.
```
<button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</button>
```

(Observe que esta lista não abrange tudo o que você pode usar. Para obter uma lista completa de todas as propriedades CSS, veja a referência Folhas de Estilos em Cascata.)

Pseudoelementos para definir o estilo de controles de botão

O controle button não tem nenhum pseudoelemento para definir o estilo.

Pseudoclasses para definir o estilo de controles de botão

Este controle dá suporte às pseudoclasses a seguir que você pode usar como seletores para definir o estilo do controle quando ele está em determinados estados.

:hover
Aplica estilos a um controle de button quando o usuário coloca o cursor sobre o button, mas não o ativou clicando nele.

Este exemplo define um estilo para um button no estado de foco.
```
#hoverButton:hover {
    background-color: deeppink;
}
```
```
<button id="hoverButton">A button</button>
```
:active
Aplica estilos a um controle de button quando ele está habilitado. O button é ativado entre o momento em que o usuário pressiona o controle e libera o controle. Se o usuário pressionar o controle e arrastar o ponteiro para fora do botão, o controle ainda permanecerá ativo até o usuário liberar o ponteiro.

Este exemplo altera a cor da tela de fundo de um button ativo.
```
#activeButton:active {
    font-weight: bold;
    border-color: deeppink;
}
```
```
<button id="activeButton">A button</button>
```
:focus
Aplica estilos a um controle de button quando ele está focalizado. Existem várias formas de dar foco a um button:
- Designe o button com um dispositivo de apontamento.
- Navegue até o button com as teclas TAB e Shift+TAB.
- Selecione a button usando um keyboard shortcut.
Este exemplo altera a cor da tela de fundo de um button quando ele button recebe foco.
```
#focusButton:focus {
   background-color: #ffc;
}
```
```
<button id="focusButton">A button</button>
```
:disabled
Aplica estilos a um controle de button quando ele está desabilitado. Para desabilitar um botão, adicione o atributo disabled ao respectivo HTML ou defina a propriedade disabled como true em JavaScript.

Este exemplo desabilita um botão e define um estilo para ele.
```
#disabledButton:disabled {
   border-style: dotted;
}
```
```
<button id="disabledButton" disabled>A button</button>
```

(para saber mais sobre as diferentes formas de combinação de pseudoclasses e outros seletores, veja Noções básicas de seletores CSS).

Classes CSS WinJS

O WinJS inclui a CSS que você pode usar para definir o estilo de determinados controles. Para o controle button, existe a classe win-backbutton. Ela confere ao button a aparência de um botão de navegação que permite ao usuário navegar de volta para o local anterior.

Observação Para usar essa classe, a página deve incluir uma referência a uma das folhas de estilos do WinJS. Para saber mais, veja Folhas de estilos da Biblioteca do Windows para JavaScript.

Este exemplo usa a classe win-backbutton para atribuir a um button o estilo de um botão de navegação.

<button id="backButton" class="win-backbutton"></button>

O uso da classe faz com que um button tenha esta aparência:

Um botão que usa a classe win-backbutton

Tópicos relacionados

Amostra de controles HTML essenciais

Guia de início rápido: adicionando um botão

Diretrizes e lista de verificação de botões

Share via