Como fazer um link de chamada clicável usando HTML

Um link de chamada clicável é geralmente utilizado por sites baseados em serviços. Com a ajuda deste elemento HTML, os usuários são impedidos de perder tempo escrevendo um número de telefone em seus telefones no site. Eles só precisam clicar no link e ligar para o serviço. Mais especificamente, uma tag html pode ser utilizada com o atributo href = tel para fazer um link de chamada clicável.

Este manual fornecerá um procedimento para fazer um link de chamada clicável no HTML.

Como fazer um link de chamada clicável usando HTML?

Em HTML, primeiro, adicione um elemento com a classe de atributo “chamada telefónica”. Em seguida, dentro deste elemento div, adicione a tag para inserir o número de telefone. Nesse cenário, o atributo href especifica o link de chamada. Este link é criado adicionando a palavra -chave Tel, cólon e número em vírgulas invertidas, conforme fornecido no bloco de código abaixo.

Html

Ligue para nós

Ao fornecer o código HTML acima, o navegador exibe o seguinte resultado:

Pode ser visto no GIF acima fornecido que o link de chamada clicável foi criado com sucesso.

Como aplicar estilos CSS no link de chamada clicável?

Nesta seção, as propriedades CSS serão aplicadas aos elementos HTML adicionados.

Elemento corporal de estilo

corpo
Background-Color: #CD104D;

O elemento corporal do HTML é aplicado com o “cor de fundo" como "#CD104D”.

Estilo telefônico de estilo

.chamada telefónica
Alinhamento de texto: centro;
margem: 100px automático;

Aplique estilos na chamada telefônica com as propriedades CSS da seguinte forma:

• • ““alinhamento de texto”Propriedade fornece o alinhamento ao texto div.
  • ““margem”A propriedade é definida com um valor de 100px automático, onde o primeiro valor especifica o espaço na parte superior e inferior, e o segundo valor especifica o igual espaço à esquerda e à direita do elemento.

Tag de estilo “A” da chamada telefônica

.telefone telefônico
Cor: RGB (250, 245, 231);
Background-Color: #fd841f;
preenchimento: 25px;
Radio de fronteira: 10px;
Decoração de texto: Nenhum;
Size da fonte: 24px;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

A etiqueta de âncora usada dentro da chamada telefônica da DIV é aplicada com as propriedades CSS que são explicadas abaixo:

• • ““cor”Propriedade especifica a cor da fonte.
  • ““cor de fundo”A propriedade aplica a cor ao fundo do elemento.
  • ““preenchimento”Propriedade especifica o espaço em torno do conteúdo do elemento.
  • ““Radio de fronteira”Propriedade faz as bordas do elemento redondo.
  • ““decoração de texto”Propriedade está definida com o valor nenhum para remover o sublinhado do botão.
  • ““tamanho da fonte”A propriedade é utilizada para a configuração do tamanho da fonte.
  • ““família de fontes”Está definido com valores Verdana, Genebra, Tahoma, Sans-Serif. Esta lista é fornecida para garantir que, se o navegador não suporta o primeiro, a outra será aplicada.

Salve o código acima mencionado e abra-o no navegador. A tela de saída será assim:

É assim que podemos fazer um link de chamada clicável usando HTML.

Conclusão

Para fazer um link de chamada clicável, uma tag html pode ser utilizada, onde o atributo href da tag é utilizado para adicionar um link. Além disso, dentro do atributo href, a palavra -chave Tel e o número de telefone são especificados. Este artigo demonstrou o método para criar um link de chamada clicável em html com um exemplo prático.