freeCodeCamp

title	localeTitle
CSS Buttons	Botões CSS

Botões CSS

<button>Click Me</button>

Você pode alterar várias propriedades de um botão para alterar sua aparência.

Para adicionar sombras ao botão, use box-shadow propriedade box-shadow .

Para adicionar transparência a um botão para um efeito desabilitado, use a opacity da propriedade.

Para remover as margens e criar um grupo de botões, adicione float:left/right property.

Para criar um grupo de botões, mas com as bordas, use a propriedade float e adicione uma border property .

Para criar um grupo vertical de botões, use display: block property .

Para alterar a cor de fundo de um botão, use a propriedade background-color:

button {background-color: #6ba0f4;}

Para adicionar uma borda colorida a um botão, use a propriedade border:

button { 
  background-color: #FFF; 
  color: #FFF; 
  border: 2px solid #6ba0f4; 
 }

Para alterar o tamanho da fonte do texto de um botão, use a propriedade font-size:

button {font-size: 20px;}

Para alterar o preenchimento de um botão, use a propriedade padding:

button {padding: 15px 30px;}

Para alterar a largura de um botão, independentemente do conteúdo do texto, use a propriedade width:

button {width: 250px;}

Para criar botões arredondados, use a propriedade border-radius:

button {border-radius: 50%;}

Para alterar o estilo de um botão ao passar o mouse sobre ele, use o seletor em foco:

button:hover { 
  background-color: #0E2C5B; 
  color: #FFF; 
 }

Para determinar a velocidade do efeito de foco, use a transition-duration da propriedade.

Para desabilitar um botão, use a propriedade do cursor:

button { 
  cursor: not-allowed; 
 }