Como fazer ligações de botão para um site

Formate a marca de âncora

• classes CSS criar muito da magia visual que você vê na Internet. Escolha o atributo CSS direita, e você pode fazer qualquer coisa de colocar uma borda pontilhada em torno de um ponto de adicionar uma imagem de fundo de um botão. Começar a personalizar uma de suas marcas de âncora, fazendo seu código HTML semelhante a este:

  Visita" rel ="não siga" target ="_em branco"gt; http: //someWebSite.com&quot-gt; Visit Nossa loja .

  Substituir https://someWebsite.com com a URL do site que você gostaria que as pessoas visitam quando clicam no botão link. Alterar "Visite a nossa loja" ao texto que você gostaria que o seu link para exibir.

Adicionar atributos CSS

• Criar a classe linkButton que suas tags âncora referências colando o seguinte código na seção de estilo do documento HTML ou em uma folha de estilo externa as suas referências de documentos:

  .linkButton {display: BLOCO text-align: center, vertical-align: preenchimento média: 10px; width: 110px; height: 30px; border-style: sólido-border-color: cor azul-: púrpura background-color: amarelo-}

  Este código define o estilo de apresentação do seu link para bloquear, alinha o seu texto, define o preenchimento em torno de seu texto para 10 pixels e ajusta largura e altura do botão. Esses valores são 110 pixels e 20 pixels.

Ajuste valores de atributo CSS

• Alterar qualquer um dos valores de atributos na linkButton para alcançar o efeito desejado. Preenchimento refere-se à quantidade de espaço entre o texto do link e arestas adjacentes. Aumente o valor para aumentar a cobertura e reduzir o valor para reduzir o estofamento. Os atributos de fronteira de estilo e border-color set estilo de borda do botão e cor. Outros valores possíveis para border-style incluem pontilhada, tracejada e de casal.

Ver o link do botão

• Salve o documento HTML, vê-lo em um navegador e você verá um botão com um fundo amarelo e texto roxo. fronteira do botão é azul e suas dimensões são os valores definidos para a altura e largura. Clique no botão e seu navegador navega para a URL que você definir para o atributo href do seu link.

Traga nos Efeitos Especiais

• 
  
  
  

  Como ligações regulares, botões de link pode alterar sua aparência quando você interagir com eles. CSS pseudo-classes tornar isso possível. Adicione os seguintes pseudo-classes para a seção de estilo do seu documento HTML:

  a: visited {background-color: rosa-}
  a: hover {background-color: lightgreen-}

  a: active {background-color: laranja-}.

  A pseudo-classe visitou muda de cor de fundo do botão de link para rosa depois que alguém visita o link. O foco pseudo-class muda de cor de fundo do botão link para Lightgreen quando você passar o mouse sobre o botão. Finalmente, a pseudo-classe visitou muda de cor de fundo do botão link para brevemente laranja quando um visitante do site clica no botão. Alterar os atributos para essas classes, conforme necessário. Por exemplo, se você quer a largura do botão de link para mudar para 200 pixels e seu background-color para mudar para Lightgreen em um evento de foco, adicione um atributo de largura para a pairar pseudo-classe, como mostrado aqui:

  a: hover {background-color: largura lightgreen-: 200px;}

Imagens e Botões de link

• O texto do link é útil porque permite que você saiba onde link irá levá-lo antes de clicar nele. Neste exemplo, os visitantes do site veja "Visite nossa loja" como o texto do botão link. No entanto, é possível usar uma imagem como plano de fundo do seu botão de link. Essa imagem aparece atrás do texto normal do botão. Adicionar uma imagem de fundo para o seu botão de link, colando o seguinte código CSS no final da sua classe linkButton:

  background: url (IMAGE_URL) -
  background-size: 70px 50px;
  background-repeat: no-repeat;

  Substitua IMAGE_URL com o URL de uma imagem na Internet ou no seu servidor Web. Substitua 70px 20px e com a largura e altura que você gostaria de sua imagem para ser. Certifique-se de que a imagem é pequena o suficiente para caber dentro do botão. Você também pode usar um programa de edição de imagem, como o Microsoft Paint. Paint.Net ou Pixlr.com, para desenhar qualquer imagem.

Dicas de imagem

• O atributo background-size redimensiona a imagem de acordo com os valores definidos para o fundo-size. Enquanto isso funciona, a sua página Web irá carregar mais rápido se você redimensionar a imagem manualmente usando seu programa de edição de imagem. Consulte a documentação aplicações Ajuda se precisar de assistência aprender a redimensionar uma imagem.