Um botão é uma parte fundamental do HTML que executa várias tarefas. Usando CSS, você pode projetar e estilizar o botão. Existem diferentes maneiras de projetar o botão, como colorir o botão, redimensionar, pairar e muito mais.

Neste artigo, primeiro, aprenderemos a criar um botão e depois alterar a cor de um botão no Hover.

Vamos começar!

Como alterar o botão de cor no pau no CSS?

No CSS, “:flutuar”É usado para alterar a cor do botão no mouse. ““:flutuar”É uma pseudo-classe que permite alterar o comportamento dos elementos HTML quando um mouse sobre ele, como elementos como links, botões, imagens e muito mais.

A sintaxe de :flutuar é fornecido abaixo.

Sintaxe

Na sintaxe acima fornecida, “a”Refere -se ao elemento HTML em que o“:flutuar" é aplicado. No CSS, você pode definir o comportamento pairar dos elementos HTML, como a cor, tamanho e largura do elemento.

Etapa 1: Crie div e botão

No HTML, primeiro, criaremos uma div e adicionaremos um título com

e um botão usando uma tag. Aqui, atribuiremos o nome da classe do botão como “btn”E o texto do botão como“Passe o mouse em mim”.

Html

O resultado do código acima mencionado é dado abaixo. Você pode ver que o cabeçalho e o botão são criados:

Agora, vá para o CSS para estilizar a div e o botão um por um.

Etapa 2: Botão de estilo e div

Primeiro, vamos estilizar o contêiner criado usando “div”. Então, definiremos a altura da div como “250px”E a cor de fundo como“RGB (199, 173, 192)”. Também usaremos a propriedade da fronteira para ajustar a borda da div, largura como “5px", Estilo como"sólido”E cor como“RGB (40, 2, 55)”.

CSS

A saída abaixo dada indica que o estilo adicionado é aplicado com sucesso na div:

Na próxima etapa, iremos estilizar o botão usando CSS.

Agora, vamos estilizar o botão usando “.btn”Para acessar o botão que é criado em HTML. Depois disso, esconderemos a fronteira do botão definindo “nenhum”Como o valor da propriedade da fronteira. Depois disso, ajustaremos o tamanho da fonte para “grande”E o preenchimento do botão para“10px”Para criar espaços entre o conteúdo do botão e a borda do botão. No final, definiremos a cor do texto e do fundo como “RGB (50, 0, 54)" e "RGB (193, 54, 135)”:

O botão agora está estilizado:

Além disso, aplicaremos “:flutuar”Para alterar a cor de um botão no mouse.

Etapa 3: Altere a cor do botão no mouse

Agora, vamos usar “.BTN: Passe o mouse”Para vincular o botão com o elemento de pseudo-classe hover. Como resultado, o hover será aplicado ao botão. Em seguida, definiremos a cor de fundo e a cor do texto do botão como “RGB (66, 2, 41)" e "RGB (119, 255, 0)”. Essas cores serão aplicadas ao botão quando um mouse nele:

Na saída abaixo fornecida, você pode ver que a cor do botão é alterada quando um mouse pairará nele:

É isso! Explicamos o método para alterar a cor do botão no pau usando CSS.

Conclusão

Para alterar a cor de um botão no passe, o “:flutuar”O elemento pseudo-classe é usado. Para fazer isso, vincule o botão com: Passe o mouse e defina a cor do botão, que mudará quando passaremos. Neste artigo, explicamos o método para alterar a cor do botão em pairar e fornecemos um exemplo disso.