Botão CSS clicou
Exemplo 01: Usando CSS para fazer um botão produzir um efeito de rejeição em um arquivo html
Neste exemplo, usaremos o estilo CSS de etiqueta para transformar um botão em um efeito de clique. Vamos nos concentrar no efeito posterior de um clique no botão e animar o botão para produzir um efeito de clique.
Abrimos uma etiqueta de estilo no cabeçalho do arquivo em que definiremos o estilo do botão em uma classe separada que pode ser chamada em qualquer tag de botão em todo o arquivo. Vamos abrir o parêntese depois de dar um nome à classe. Em seguida, começaremos dando a ele preenchimento (em pixels) para ajustar o botão na página. Então vamos dar o botão a cor de fundo. Depois disso, a propriedade de Shadow Box será usada. O valor seria composto por formato de pixel para a sombra e o formato RGBA para a cor da sombra. Então, vamos dar ao botão um cursor de ponteiro. Quando o botão será clicado, o cursor será transformado devido a esta propriedade. A última propriedade será a propriedade de transição que especificará o tempo de reação da animação do botão.
Depois de fechar os parênteses, classificaremos outra função para esta classe separadamente. Nesta função, especificaremos a escala de transformação e a mudança na sombra da fronteira usando o mesmo formato que usamos anteriormente. Depois disso, abriremos a etiqueta do corpo e daremos um título e um botão. Na tag de botão, mencionaremos o nome da classe que acabamos de criar na tag de estilo presente no cabeçalho do arquivo.
Podemos ver que o botão na saída acima tem uma sombra e o preenchimento é visível. Embora a animação seja mais visível no navegador, mas o estilo é mais visível no trecho acima.
Exemplo 02: Usando CSS para fazer um botão saltar em um arquivo html
Neste exemplo, usaremos as tags de estilo CSS para fazer um salto de botão quando clicado. Vamos nos concentrar no resultado de um botão clique e animar o botão para produzir um efeito de salto.
No script acima, abrimos uma etiqueta de estilo no cabeçalho do arquivo para especificar o estilo do botão. O estilo do botão é armazenado em uma classe separada que pode ser usada em qualquer tag de botão ao longo do projeto. Depois de darmos ao nome da classe um, abriremos os parênteses da classe. Primeiro, daremos ao botão um cursor de ponteiro para que, quando ele for clicado, o cursor mude. Em seguida, adicionaremos algum preenchimento (em pixels) para alterar a posição do botão na página. Por fim, definiremos a cor de fundo do botão. Depois disso, a propriedade de Shadow Box será utilizada com o valor que consiste em formato Pixel para o formato Shadow e RGBA para a cor da sombra. Nós também vamos centralizar alinhá -lo.
Depois de fechar os parênteses da classe, categorizaremos outra função para esta classe.Especificaremos a escala de transformação e as mudanças na sombra da fronteira no mesmo formato que usamos na propriedade anterior. Depois disso, abriremos a etiqueta corporal e adicionaremos um título e um botão. Na nossa tag de botão, declararemos o nome da classe que acabamos de construir na tag de estilo no cabeçalho do nosso arquivo.
Podemos ver que o botão na captura de tela acima tem todo o estilo que especificamos no estilo e a animação de clicar no botão seria perceptível no navegador.
Exemplo 03: Usando CSS para transformar a cor do botão depois de clicar nele
Neste exemplo, mudaremos a cor de um botão quando ele será clicado. Usaremos o CSS neste exemplo e todo o estilo será definido na tag de estilo para o elemento do botão.
No script acima, abriremos uma etiqueta de estilo no cabeçalho do arquivo. Em seguida, definiremos as propriedades de estilo para o botão padrão que a linguagem de marcação de hipertexto fornece. Na tag de estilo, começaremos dando ao botão a cor amarela de fundo. Depois disso, chamaremos a classe de botão com a propriedade Focus Transition e em seus parênteses. Definiremos a cor de fundo que será diferente da cor de fundo definida anteriormente. Isso resultará em uma mudança de cor quando o botão for clicado.
Agora vamos abrir este arquivo html em nosso navegador e observar a transformação do botão.
Neste trecho, podemos ver que o botão tem o estilo definido na primeira propriedade da tag de estilo e, quando clicarmos nele, obtemos a seguinte saída:
O botão se transformou após o clique e a cor agora está vermelha, conforme definido no parêntese do Button Focus.
Exemplo 04: Usando CSS para alterar a forma de um botão depois de clicar nele
Quando um botão for clicado, modificaremos sua forma neste exemplo. Neste exemplo, aplicaremos CSS. Todo o estilo será definido na tag de estilo para o elemento do botão. A propriedade de foco do botão que resultará na alteração da forma e cor do botão.
Abriremos uma etiqueta de estilo no cabeçalho do arquivo e forneceremos as propriedades de estilo para o botão padrão fornecido pela linguagem de marcação de hipertexto no script acima. Na etiqueta de estilo, começaremos a tornar o fundo do botão vermelho e atribuindo um tamanho ao texto pela propriedade do tamanho da fonte. Depois disso, chamaremos a classe de botão com a propriedade Focus Transition e definiremos a cor do fundo. Será diferente da cor de fundo anteriormente declarada, que é roxa. Em seguida, adicionaremos a propriedade do radiato de fronteira e atribuiremos um valor em pixels. Então, quando o botão é clicado, a forma e a cor mudarão.
A saída acima mostra o estado do botão antes de ser clicado. O botão tem uma borda retangular com fundo vermelho e, se clicarmos no botão, obteremos a saída abaixo:
Agora podemos ver a transformação da cor e a forma do botão, pois a borda tem bordas arredondadas e fundo roxo.
Conclusão
Neste artigo, analisamos diferentes exemplos de que o CSS nos permite criar um efeito em um elemento de botão da linguagem de marcação de hipertexto quando é clicado. Usamos a abordagem de tag de estilo para adicionar CSS ao elemento do botão neste artigo. Focamos na transformação de cor, forma e sombra do botão e até adicionou algumas animações ao botão quando ele será clicado. Usamos o IDE no bloco de notas ++ para implementar esses exemplos neste artigo.