Change language
Python.Engineering Wiki botão javascript css

botão javascript css

around | blur | diag | exp | find | JavaScript | mean | sin | square
Michael Zippo Michael Zippo

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:

Screen Shot 2020 04 03 a 13.10.32

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:

ad Dtfk7RIpGyKmzp9eDBrGsFWlOFbIn WMLsfL2IlEEs4TFEHnscuJ3bhsZdx5GEz3zR2bv5Ec3W2eH49suj BISbjhj Ib0gv 4ETJxxUJRp Mxzhop8cvg2 usamos na figura verde <x> 8gy> 8gy>> usamos a propriedade MxzPG8cvG2: para definir a cor do texto em ou r botão verde.</p><h2>Tamanho do texto</h2><p>Você pode usar a propriedade CSS font-size para definir o tamanho do texto em um botão. Digamos que queremos que o texto tenha um tamanho de fonte de 20px. Podemos conseguir isso usando o seguinte código:</p> <p>Nosso código retorna:</p><figure class = Screen Shot 2020 03 25 A 08.33.23

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:

Screen Shot 2020 03 25 a 08.39.39

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.

Nosso código retorna:

Captura de tela 2020 03 25 às 08.49.42