Nos documentos HTML, o usuário pode utilizar diferentes elementos, como tabelas, formas, campos de texto, imagens e botões. Os botões nas páginas da web são usados ​​para executar qualquer ação ou para gerar qualquer evento em um botão Clique. Também pode ser utilizado para solicitar a qualquer outra página da web. Os desenvolvedores incorporam botões nas páginas da web em diferentes estilos e formas.

Este tutorial demonstrará:

• Como fazer/criar um botão em html?
• Como fazer/criar um botão de círculo usando propriedades CSS?

Como fazer/criar um botão em html?

Se o usuário quiser fazer um botão no HTML, experimente as instruções fornecidas.

Etapa 1: Crie um contêiner div

Primeiro, use o “”Elemento para criar um contêiner“ div ”. Além disso, adicione um “eu ia”Atributo com um valor específico de acordo com suas preferências.

Etapa 2: Insira o cabeçalho

Em seguida, insira um título de nível um usando o “

" elemento. Em seguida, incorpore o texto do cabeçalho entre o “

" Tag.

Etapa 3: Crie o botão

Crie um botão em html utilizando o “”Tag junto com a“tipoAtributo como “enviar”:

Botão do círculo CSS

Enviar

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

Agora, mova -se em direção à próxima seção para fazer o botão circular.

Como fazer/criar um botão de círculo usando propriedades CSS?

O "Radio de fronteira”A propriedade é utilizada para fazer o botão na forma de um círculo. Esta propriedade define os elementos cantos de cada lado.

Para fazer isso, observe o procedimento passo a passo dado.

Etapa 1: estilo “Div” contêiner

Primeiro, acesse o “div”Contêiner usando o nome da classe“#círculo-btn”E aplique as seguintes propriedades CSS para estilo:

#círculo-btn
Altura: 200px;
Largura: 200px;
margem: 50px;
preenchimento: 80px;
borda: 3px RGB sólido (23, 8, 228);
Background-Color: Blanchedalmond;

Aqui:

• O "altura”A propriedade é utilizada para especificar a altura do elemento.
• ““largura”Define o tamanho do elemento horizontalmente.
• ““margem”É usado para alocar o espaço fora da borda definida.
• ““preenchimento”Especifica o espaço dentro do limite.
• ““fronteira”Aloca um limite ao redor do elemento.
• ““cor de fundo”A propriedade é usada para especificar a cor na parte traseira do elemento.

Saída

Etapa 2: faça o botão do círculo

Agora, acesse o botão por nome da tag e aplique as propriedades fornecidas no botão para torná -lo circular:

botão
exibição: bloco;
Altura: 150px;
Largura: 150px;
Radio de fronteira: 50%;
borda: 1px vermelho sólido;

A descrição do código acima é o seguinte:

• O "mostrar”.
• ““Radio de fronteira”A propriedade é utilizada para definir as bordas dos elementos redondos de todos os lados. Em nosso cenário, o valor desta propriedade é definido como “50%”Para fazer o botão redondo de todos os lados.

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

Etapa 3: Aplique o efeito “Passe o mouse” no botão

Aplicar o "flutuar”Pseudo -aula para adicionar o efeito do pau no botão:

Botão: Hover
Cor: RGB (247, 274, 248);
Background-Color: CadetBlue;

No "Botão: Passe o mouse", A propriedade CSS"cor de fundo”É utilizado para definir a cor do fundo e“cor”É usado para especificar a cor do texto.

Saída

Você aprendeu o método para criar um botão de círculo no CSS.

Conclusão

Para criar um botão de círculo no CSS, primeiro, crie um botão simples, utilizando o “”Tag em html. Então, aplique o “Radio de fronteira”Propriedade que define as bordas do elemento de todos os lados. O valor do "radiato de fronteira" é especificado como "50%”Para fazer o botão circular. Este post explicou o procedimento para fazer o botão Circle no CSS.