HTML fornece elementos diferentes; Um deles é o “botão”, Que é usado para executar uma ação específica na página da web. Usando CSS, você pode estilizar o botão de maneiras diferentes, como o tamanho, a cor, a forma, o mouse e muito mais do botão. Para fazer isso, diferentes propriedades do CSS podem ser utilizadas para estilizar o botão de acordo com os requisitos.

Este manual ensinará o procedimento de modificar a cor do botão. Vamos começar!

Como alterar a cor do botão no CSS?

Você pode alterar a cor do botão usando o “cor de fundo”Propriedade e defina a cor do botão de acordo com suas preferências. Basicamente, o “cor de fundo”A propriedade é utilizada para adicionar a cor de fundo dos elementos html.

Sintaxe

A sintaxe da propriedade cor de fundo é a seguinte:

Background-Color: Valor

No local do valor da cor de fundo, você pode definir a cor que deseja exibir atrás dos elementos HTML.

Agora, vamos para o exemplo prático, no qual mudaremos a cor do botão.

Exemplo

Primeiro, aprenda a criar um botão no div e depois alterar sua cor usando CSS.

Etapa 1: Crie Div & Button

No HTML, criaremos uma div e atribuiremos o nome da classe como “div”. Dentro da tag, adicionaremos um título usando o

Tag e um botão usando a tag com o nome da classe como “btn”. O texto que será exibido no botão é “Cor”.

Html

Alterar a cor do botão no CSS

Cor

Pode -se observar que a div e um botão são criados:

Agora, passaremos para o próximo passo para estilizar o div criado usando CSS.

Etapa 2: Div de estilo

Aqui, use “.div”Para acessar o contêiner criado e definir sua altura como“200px”. Então, estilize o div usando o “fronteira”Propriedade para definir a fronteira ao redor da div. A largura da fronteira é definida como “4px", Seu estilo como"sulco”E cor como“RGB (1, 34, 77)”. Vamos definir a forma da fronteira com o “Radio de fronteira”Propriedade e defina seu valor como“25px”. Depois disso, use o “cor de fundo”Propriedade para definir a cor de fundo da div e atribuir o valor da cor como“RGB (210, 243, 241)”.

CSS

.div
Altura: 200px;
borda: ranhura 4px RGB (1, 34, 77);
Radio de fronteira: 25px;
Background-Color: RGB (210, 243, 241);

Como resultado, o contêiner criado é estilizado:

Vamos passar para a etapa final, na qual colorimos o botão usando CSS.

Etapa 3: Alterar a cor do botão

Depois de denominar a div no CSS, usaremos “vamos usar“.btn”Para acessar o botão que é criado em HTML. Em seguida, defina o valor da propriedade da fronteira como “nenhum”Para remover o estilo de borda padrão. Especifique o valor da propriedade de Radius de fronteira como “15px”Para definir a forma do botão

Estilize o texto do botão usando a propriedade do tamanho da fonte e defina seu valor como “xx-grande”. Depois disso, usaremos o preenchimento como “10px”Para criar espaço entre o texto adicionado e a borda do botão.

No final, use a propriedade cor e defina seu valor como “RGB (255, 251, 7)“Para colorir o texto e a propriedade cor de fundo como“RGB (43, 87, 84)”Para definir a cor do botão:

.btn
fronteira: nenhuma;
Radio de fronteira: 15px;
tamanho de fonte: xx-large;
preenchimento: 10px;
Cor: RGB (255, 251, 7);
Background-Color: RGB (43, 87, 84);

A saída fornecida afirmou que a cor do botão é alterada com sucesso:

Nós explicamos o método para alterar a cor do botão em CSS.

Conclusão

No CSS, o “cor de fundo”A propriedade é utilizada para definir a cor do botão. Usando isso, você pode definir a cor de acordo com sua escolha e projetar elegantemente um botão. Você também pode usar propriedades diferentes para aprimorar a aparência do botão usando CSS. Neste guia, explicamos o método para alterar a cor do botão no CSS e fornecemos um exemplo para o seu melhor entendimento.