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, passar o mouse e muito mais.

Neste artigo, primeiro, aprenderemos como criar um botão e, em seguida, alterar a cor de um botão ao passar o mouse.

Vamos começar!

Como alterar a cor do botão ao passar o mouse em CSS?

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

A sintaxe de :flutuar é fornecido abaixo.

Sintaxe

Na sintaxe fornecida acima, “ uma ” refere-se ao elemento HTML onde o “ :flutuar ' é aplicado. Em CSS, você pode definir o comportamento de foco dos elementos HTML, como cor, tamanho e largura do elemento.

Etapa 1: criar div e botão

No HTML, primeiro, criaremos uma div e adicionaremos um cabeçalho com

e um botão usando uma tag. Aqui, vamos atribuir o nome da classe do botão como “ btn ” e o texto do botão como “ Passe o mouse sobre mim ”.

HTML

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

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

Etapa 2: botão de estilo e div

Primeiro, estilizaremos o contêiner criado usando “ div ”. Então, vamos definir a altura do div como “ 250px ” e a cor de fundo como “ rgb(199, 173, 192) ”. Também usaremos a propriedade border para ajustar a borda da div, largura como “ 5px ”, estilo como “ sólido ” e colorir como “ rgb(40, 2, 55) ”.

CSS

A saída abaixo indica que o estilo adicionado foi aplicado com sucesso no div:

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

Agora, vamos estilizar o botão usando “ .btn ” para acessar o botão que é criado em HTML. Depois disso, ocultaremos a borda do botão definindo “ Nenhum ” como o valor da propriedade da borda. Depois disso, ajustaremos o tamanho da fonte para “ ampla ” 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 plano de 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 ao passar o mouse.

Etapa 3: alterar a cor do botão ao passar o mouse

Agora vamos usar “ .btn:hover ” para vincular o botão com o elemento de pseudo-classe hover. Como resultado, o foco 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 passar o mouse sobre ele:

Na saída fornecida abaixo, você pode ver que a cor do botão é alterada quando o mouse passa sobre ele:

É isso! Explicamos o método para alterar a cor do botão ao passar o mouse usando CSS.

Conclusão

Para alterar a cor de um botão ao passar o mouse, o “ :flutuar ” elemento de pseudoclasse é usado. Para fazer isso, vincule o botão com :hover e defina a cor do botão, que mudará quando passarmos o mouse sobre ele. Neste artigo, explicamos o método para alterar a cor do botão ao passar o mouse e fornecemos um exemplo.