O botão é um elemento clicável usado para executar uma ação específica. Usando CSS, você pode definir diferentes estilos de botões um deles é alterar a cor de um botão em clique. A cor de um botão pode ser definida usando o CSS “:ativo”Pseudo-classe.

Este blog ensinará o procedimento relacionado à alteração da cor do botão em clique. Para isso, primeiro, aprenda sobre o: pseudo-classe ativo.

Então, vamos começar!

O que é ": ativo" no CSS?

Alterar a cor do botão no clique em CSS é possível com a ajuda do “:ativo”Pseudo-classe. No HTML, indica um elemento que está sendo ativado quando o usuário clica nele. Além disso, ao usar um mouse, a ativação começa quando a tecla do mouse é pressionada.

Sintaxe

A: ativo
cor verde;

““a”Refere -se ao elemento HTML no qual a classe: ativa será aplicada.

Vamos em direção a um exemplo para entender o conceito declarado.

Como alterar a cor do botão no clique em CSS?

Para alterar a cor de um botão em clique, primeiro, crie um botão em um arquivo html e atribua o nome da classe “btn”.

Html

Botão

Em seguida, no CSS, defina a cor do botão. Para fazer isso, usaremos “.btn”Para acessar o botão e definir a cor do botão como“RGB (0, 255, 213)”.

CSS

.btn
Background-Color: RGB (0, 255, 213);

Depois disso, aplique: pseudo-classe ativa no botão como “.BTN: ativo”E defina a cor do botão que será exibida em seu estado ativo como“RGB (123, 180, 17)”:

.btn: ativo
Background-Color: RGB (123, 180, 17);

Isso mostrará o seguinte resultado:

Agora, vamos adicionar o título com

Nome da classe de tag e botão “botão”, Dentro da tag.

Html

Altere a cor do botão

Clique em mim

Em seguida, passaremos para o CSS e estilizaremos o botão e aplicaremos: ativo nele. Para fazer isso, definiremos o estilo de fronteira como “nenhum”E dê o preenchimento como“15px”. Depois disso, defina a cor do texto do botão como “RGB (50, 0, 54)”E seu fundo como“RGB (177, 110, 149)”, E seu raio como“15px”:

.botão
fronteira: nenhuma;
preenchimento: 15px;
Cor: RGB (50, 0, 54);
Background-Color: RGB (177, 110, 149);
Radio de fronteira: 15px;

Isso mostrará o seguinte resultado:

Depois disso, aplicaremos: pseudo-classe ativa no botão como “.Botão: ativo”E defina a cor de um botão como“RGB (200, 255, 0)”:

.Botão: ativo
Background-Color: RGB (200, 255, 0);

Depois de implementar todo o código acima, vá para o arquivo HTML e execute -o para verificar o resultado:

A partir da saída, pode ser observado quando o botão é clicado, sua cor é alterada de acordo com o código de cores RGB especificado.

Conclusão

Para alterar a cor do botão em clique no CSS, o “:ativo”A pseudo-classe pode ser usada. Mais especificamente, ele pode representar o elemento do botão quando for ativado. Usando esta classe, você pode definir cores diferentes do botão quando o mouse clicar nela. Este artigo explicou o procedimento para alterar a cor do botão em clique em CSS.