Button é um elemento clicável usado para realizar uma ação específica. Usando CSS, você pode definir diferentes estilos de botões, um deles é mudar a cor de um botão ao clicar. 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 ao clicar. Para isso, primeiramente, conheça a pseudo-classe :active.
Então, vamos começar!
O que é “:active” em CSS?
Alterar a cor do botão ao clicar no CSS é possível com a ajuda do “ :ativo ” pseudo-classe. Em 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
uma : ativo {
cor : verde ;
}
“ uma ” refere-se ao elemento HTML no qual a classe :active será aplicada.
Vamos para um exemplo para entender o conceito declarado.
Como alterar a cor do botão ao clicar em CSS?
Para alterar a cor de um botão ao clicar, primeiro crie um botão em um arquivo HTML e atribua o nome da classe “ btn ”.
HTML
< corpo >< botão classe = 'btn' > Botão < / botão >
< / corpo >
Em seguida, em CSS, defina a cor do botão. Para isso, usaremos “ .btn ” para acessar o botão e definir a cor do botão como “ rgb(0, 255, 213) ”.
CSS
.btn {cor de fundo : rgb ( 0 , 255 , 213 ) ;
}
Depois disso, aplique :active pseudo-class no botão como “ .btn:ativo ” e defina a cor do botão que aparecerá em seu estado ativo como “ rgb(123, 180, 17) ”:
.btn : ativo {cor de fundo : rgb ( 123 , 180 , 17 ) ;
}
Isso mostrará o seguinte resultado:
Agora, vamos adicionar o cabeçalho com a tag
e o nome da classe do botão “ botão ”, dentro da tag .
HTML
< Centro >
< h1 > Alterar a cor do botão < / h1 >
< botão classe = 'botão' > Clique em mim < / botão >
< / Centro >
Em seguida, vamos passar para CSS e estilizar o botão e aplicar :active nele. Para fazer isso, vamos definir o estilo da borda como “ Nenhum ” e dê 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 : Nenhum ;
preenchimento : 15px ;
cor : rgb ( cinquenta , 0 , 54 ) ;
cor de fundo : rgb ( 177 , 110 , 149 ) ;
raio de borda : 15px ;
}
Isso mostrará o seguinte resultado:
Depois disso, aplicaremos a pseudoclasse :active no botão como “ .button:ativo ” e defina a cor de um botão como “ rgb(200, 255, 0) ”:
.botão : ativo {
cor de fundo : rgb ( 200 , 255 , 0 ) ;
}
Depois de implementar todo o código acima, vá para o arquivo HTML e execute-o para conferir o resultado:
A partir da saída, pode-se observar que 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 ao clicar em CSS, o “ :ativo ” pseudoclasse pode ser usada. Mais especificamente, pode representar o elemento botão quando é ativado. Usando esta classe, você pode definir diferentes cores de botão quando o mouse clica nele. Este artigo explicou o procedimento para alterar a cor do botão ao clicar em CSS.
HTML
< Centro >< h1 > Alterar a cor do botão < / h1 >
< botão classe = 'botão' > Clique em mim < / botão >
< / Centro >
Em seguida, vamos passar para CSS e estilizar o botão e aplicar :active nele. Para fazer isso, vamos definir o estilo da borda como “ Nenhum ” e dê 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 : Nenhum ;
preenchimento : 15px ;
cor : rgb ( cinquenta , 0 , 54 ) ;
cor de fundo : rgb ( 177 , 110 , 149 ) ;
raio de borda : 15px ;
}
Isso mostrará o seguinte resultado:
Depois disso, aplicaremos a pseudoclasse :active no botão como “ .button:ativo ” e defina a cor de um botão como “ rgb(200, 255, 0) ”:
.botão : ativo {cor de fundo : rgb ( 200 , 255 , 0 ) ;
}
Depois de implementar todo o código acima, vá para o arquivo HTML e execute-o para conferir o resultado:
A partir da saída, pode-se observar que 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 ao clicar em CSS, o “ :ativo ” pseudoclasse pode ser usada. Mais especificamente, pode representar o elemento botão quando é ativado. Usando esta classe, você pode definir diferentes cores de botão quando o mouse clica nele. Este artigo explicou o procedimento para alterar a cor do botão ao clicar em CSS.