No desenvolvimento da web, os botões são os principais componentes que permitem a interação do usuário com o site. Os botões podem aprimorar a experiência do desenvolvedor e trazer mais renda para o negócio. Além disso, os botões ajudam os desenvolvedores a navegar pelo produto porque exigem que os usuários convertem os resultados desejados.

Neste artigo, demonstraremos:

• Como criar/fazer um botão em html?
• Como estilo clique no botão em CSS?

Como criar/fazer um botão em html?

Para criar/fazer um botão no HTM, o html “”O elemento é utilizado. Para demonstração prática, você deve verificar as instruções fornecidas.

Etapa 1: faça um recipiente "div"

Inicialmente, faça um “div“Contêiner inserindo um“" elemento. Em seguida, atribua um atributo de classe e aloque um nome para uso posterior.

Etapa 2: Insira um título

Em seguida, utilize a tag de cabeçalho HTML para inserir um título. Os usuários podem usar qualquer tag de cabeçalho do “

" para o "

" marcação. Nesse cenário, o “

Etapa 3: Crie um botão

Depois disso, crie um elemento de botão com a ajuda do “" elemento. Em seguida, especifique o botão “tipo" como "enviar”E incorpore algum texto entre a tag de botão para exibir no botão:

Botão clicado de estilo

Clique no botão

Pode -se observar que o botão foi criado com sucesso:

Mova -se em direção à próxima seção para aprender sobre o botão clicado.

Como estilizar um botão clicado no CSS?

Existem diferentes pseudo-classes, incluindo “:flutuar" e ":foco”Utilizado com elementos de botão. Além disso, o usuário também pode aplicar as várias propriedades CSS em um botão para modelar.

Para estilizar um botão clicado no CSS, experimente o seguinte procedimento.

Etapa 1: estilo “Div” contêiner

Acesse o "div”Contêiner usando o seletor de atributos e o atributo. Para fazer isso, o “.BTN-container”É usado para esse fim:

.BTN-container
margem: 60px;
preenchimento: 20px 40px;
borda: 3px rgb pontilhado (47, 7, 224);
Altura: 150px;
Largura: 200px;
alinhado-itens: centro;

De acordo com o snippet de código fornecido:

• ““margem”A propriedade ajuda a adicionar o espaço em branco ao redor do limite do elemento.
• ““preenchimento”É usado para especificar o espaço dentro do elemento.
• ““altura" e "largura”As propriedades alocam o tamanho para um elemento definido.
• ““alinhado-itens”É utilizado para definir o alinhamento do item dentro do elemento.

Saída

Etapa 2: elemento do botão de estilo

Acesse o elemento do botão com a ajuda de “botão”E aplique as propriedades abaixo do ponto no snippet de código:

botão
Filtro: Shadow Drop (5px 8px 9px RGB (42, 116, 126));
Altura: 50px;
Largura: 100px;
cor de fundo: amarelo;

Aqui:

• ““filtro”A propriedade é usada para aplicar o efeito visual no elemento definido. Para fazer isso, o valor desta propriedade é definido como “Drop-shadow”, Que é utilizado para especificar a sombra no elemento.
• ““cor de fundo”É utilizado para alocar a cor na parte traseira do elemento. Por exemplo, o valor disso é especificado como “amarelo”.

Saída

Etapa 3: estilo com seletor ": pairar"

Agora, acesse o elemento do botão ao longo do seletor de pseudo, que é usado para selecionar elementos quando o usuário mouse sobre eles:

Botão: Hover
Background-Color: RGB (238, 7, 7);

Para fazer isso, o “cor de fundo”A propriedade é usada com o valor“RGB (238, 7, 7)”. Esta cor será exibida apenas quando o usuário pairá sobre o botão.

Saída

Etapa 4: estilo com seletor ": foco"

Agora, utilize o “:foco”Pseudo -seletor ao longo do elemento do botão, que é usado para aplicar estilo no elemento selecionado quando o usuário é direcionado pelo teclado ou focado pelo mouse:

Botão: foco
Background-Color: Blue;

Nesse cenário, o “cor de fundo”É usado com os valores definidos como“azul”.

Você aprendeu o método para modelar o botão clicado no CSS.

Conclusão

Para estilizar o botão clicado no CSS, primeiro, crie um botão em html com a ajuda do “" elemento. Em seguida, acesse o botão Pseudo -seletores, como “: pairar "e": foco”E aplique propriedades CSS, incluindo“altura "," largura "," filtro "," cor de fundo", e muitos mais. Este post foi sobre estilizar o botão clicado no CSS.