Como criar um botão HTML que age como um link

No HTML, o componente do botão executa certas atividades, como um botão de link que pode ser usado para navegar para a outra página de acordo com a necessidade. Além disso, com a ajuda do CSS, os usuários podem alterar o tamanho do botão, a forma, a cor, a largura, a altura e muitos outros aspectos. O botão pode ser projetado com várias propriedades de acordo com a necessidade.

Este blog demonstrará as instruções para criar um botão HTML que age como um link.

Como criar um botão HTML que age como um link?

Confira o procedimento abaixo mencionado para criar um botão de link HTML.

Etapa 1: Crie uma div

No corpo principal HTML, crie um recipiente de div e especifique o nome da classe como “BTN-AREA”.

Etapa 2: Crie link para o botão

Em seguida, defina o “a”Tag e a“Href”Elemento, que indica o URL de destino onde o usuário será navegado após clicar no botão.

Etapa 3: Atribuir aula de botão

Agora, crie um botão e especifique sua classe. Por exemplo, defina a classe de botão como “Link-Button”E adicione o texto entre“botão”Tags como adicionamos“Visite Linuxhint”.

Depois de definir o botão, feche o “" e "" Tag.

Aqui está o bloco de código para o cenário discutido:

Visite Linuxhint

Agora, siga em frente em direção ao estilo do botão.

Como estilizar um botão com CSS que age como um link?

Para estilizar um botão com CSS que age como um link, verifique as instruções fornecidas.

Etapa 1: Link de estilo

Estilo o botão definindo os seguintes atributos no “Link-Button" aula:

• • O "cor de fundo”A propriedade é usada para especificar a cor como“Bisque”.
  • Defina o preenchimento como “10px”, Que é utilizado para ajustar o espaçamento das células.
  • O radiato da fronteira é definido como “8px”Para arredondar os cantos da borda externa do elemento.
  • A sombra da caixa será definida como “1px, 2px, 1px, 2px"Com a cor"cinza”.
  • Defina a propriedade de margem como “5px ” Para o espaçamento superior e de botões e “100px”Para espaçamento direito e esquerdo.
  • A fronteira é definida como “1px Solid #CE7777”:

.Link-Button
Background-Color: Bisque;
preenchimento: 10px;
Radio de fronteira: 8px;
Shadow de caixa: 1px 2px 1px 2px cinza;
margem: 5px 100px;
fronteira: 1px Solid #CE7777;

Etapa 2: Defina a largura do botão

““.BTN-AREA”A classe é usada para acessar o contêiner Div que definirá a largura do botão como“500px"E margem de propriedade como"auto”Que ajusta automaticamente a margem ao redor da área do botão:

.BTN-Area
Largura: 500px;
margem: automático;

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

Explicamos o método para criar e estilizar o botão HTML que age como um link.

Conclusão

Para criar um botão HTML que age como um link, antes de tudo, crie um contêiner div e especifique a classe com o nome. Em seguida, defina o “”Tag junto com a“Href”Atributo para incorporar o link. Em seguida, crie um botão e atribua a classe de botão e nome. Depois disso, estilize o botão Link aplicando propriedades CSS às classes definidas. Este post demonstrou a abordagem mais simples para criar um botão HTML que age como um link.