Ao criar um site, você geralmente terá um botão que deseja que ele apareça de uma determinada maneira. Por exemplo, você pode querer que um botão tenha uma cor de fundo do que outros elementos na página para chamar a atenção do usuário para o botão.
Usando CSS, os desenvolvedores podem criar botões com estilos. CSS permite que você altere entre outras coisas.
cor, tamanho do texto, borda, largura e altura de um botão, Este tutorial discutirá, com exemplos, como usar uma série de propriedades CSS para estilizar um HTML botão. Quando terminar de ler este tutorial, você será um especialista em estilizar botões usando CSS.
Visão geral dos botões
Você pode definir um botão de várias maneiras HTML. As duas abordagens mais comuns são Encontre sua correspondência no Bootcamp
Se queremos estilizar nosso botão, ou seja, personalizar a aparência da página, temos que usar css. Neste artigo, discutiremos como fazer o seguinte em um botão: ..
Alterar a cor de fundo
Alterar a cor do texto
Alterar o tamanho do texto.
Adicionar preenchimento.
nos cantos.
Adicione uma borda colorida .
Use-a: .... recurso de foco
Adicione sombra
Alterar largura
desativar
Animá-lo.
Também discutiremos como criar grupos de botões horizontais e verticais.
Voltar - cor do plano
Durante o design de um botão, a primeira coisa que você pode fazer é definir uma cor de fundo - plano para o botão. Por padrão, um botão tem um fundo branco e texto preto. Ao usar a cor de fundo CSS, podemos e altere a cor de fundo de um botão.
Suponha que você esteja projetando um botão para um site e queira que o botão tenha um fundo rosa. Podemos alterar a cor do nosso botão usando o seguinte código CSS:
Nosso código retorna:
Usando a propriedade background color , alteramos a cor do plano de fundo do nosso botão para rosa. Podemos alterar a cor de fundo do nosso botão para uma cor usando esta propriedade.
Cor do texto
Para alterar a cor do texto de um botão, você pode usar o botão color. um botão e queremos que o botão tenha um fundo rosa e o texto em verde. Poderíamos criar este botão usando o seguinte código:
Nosso código Retorna:
Nosso botão está do mesmo tamanho de antes, mas agora o tamanho dos caracteres dentro é 20px. Usamos o atributo font size para definir o tamanho do texto em nosso botão.
Preenchimento
Ao projetar um botão, você pode decidir que você quer uma certa quantidade de espaço entre o texto dentro de um botão e as paredes externas do botão. É aqui que a propriedade de amortecimento entra em ação .
A propriedade de preenchimento usa indicadores de comprimento (px, em e assim por diante) ou valores percentuais ‚Äã‚Äãpara definir uma certa quantidade de espaço entre os botões de texto e suas bordas.
Suponha que queremos criar dois botões em nossa página. Um botão deve ter preenchimento de 40px e o outro deve ter preenchimento de 20px. Podemos criar esses botões usando o seguinte código:
Nosso código retorna:
Você pode usar a propriedade border-radius para criar botões retangulares com cantos arredondados. Aqui estão três exemplos de código que usam a propriedade border-radius. Para ilustrar o efeito de diferentes tamanhos de raio, cada exemplo usa um raio de borda de tamanho diferente.
