Como transformar links em botões para html5 e css3 programação

Quanto ao código HTML5 está em causa, é simplesmente uma lista de links. Não há nada de especial aqui que faz com que este ato como um grupo de botões, exceto a criação de uma div chamada cardápio

. Todo o trabalho real é feito em CSS:

Video: BIBLIOTECA HOVER.CSS / INTERAGINDO BOTÕES (CSS3/HTML5)

li #menu {list-style-type: none; width: 7em-text-align: center-margin-left: -2.5em -} # menu a {text-decoration: none; color: black display: block-fundo -cor: # EEEEFF-box-shadow: 5px 5px 5px cinza-margin-bottom: 2px;} # menu a: hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px cinza-border: none;}

O processo para transformar uma lista comum de links em um grupo de botões como este é simplesmente uma aplicação de truques CSS:

1. Comece com uma lista comum, que irá validar corretamente.

   Não importa se você usar uma lista desordenada ou encomendados. Normalmente, a lista conterá âncoras para outras páginas. Este exemplo utiliza uma lista de links para alguns sites populares:

2. Google
3. Wiley
4. Wikipedia
5. Reddit

6. Coloque a lista em um div nomeado.

   Video: criando links e botões para abrir páginas em html

   Normalmente, você ainda tem ligações comuns em uma página. Para indicar que esses links do menu deve ser tratado de forma diferente, colocá-los em uma div chamada cardápio. Todos os truques de estilo CSS aqui descritas referem-se a listas e âncoras somente quando eles estão dentro de uma div.

7. Retirar as balas, definindo o list-style-type para Nenhum.

   Isso remove os marcadores ou números que geralmente aparecem em uma lista, porque esses recursos distrair o efeito que você está buscando (um grupo de botões). Use CSS para especificar como os itens da lista deve ser formatado quando eles aparecem no contexto do cardápio IDENTIDADE:

   #menu li {list-style-type: none; width: 5em-text-align:-centro-margem esquerda: -2.5em-}

8. Especifique a largura de cada botão:

    largura: 5em-

   Um grupo de botões fica melhor se eles são todos do mesmo tamanho. Use o CSS largura atribuir a cada definir li para 5em.

9. Remover a margem usando um negativo -margem esquerda valor, como mostrado aqui:

    -margem esquerda: -2.5em-

   Listas têm uma fissura padrão de cerca de abrir espaço para os marcadores ou números. Porque esta lista não terá balas, ele não precisa dos recortes. Substituir o comportamento de recuo padrão definindo para um valor negativo -margem esquerda valor.

10. Limpar a âncora, definindo text-decoration para Nenhum e definindo a cor da âncora para algo estático, como texto preto em azul claro neste exemplo:

    #menu a {text-decoration: none; color: black display: block-background-color: # EEEEFF-box-shadow: 5px 5px 5px cinza-margin-bottom: 2px;}

    
    
    
    

    aparência do botão vai deixar claro que os usuários podem clicar nele, então este é um lugar que você pode remover o sublinhado que normalmente vai com links.

11. Dê a cada botão uma sombra caixa, como mostrado a seguir:

     box-shadow: 5px 5px 5px grisalhos

    A sombra faz com que pareça um botão 3D saindo da página. Este é o melhor anexado à âncora, de modo que você pode trocar a fronteira quando o mouse está pairando sobre o botão.

12. Definir a âncora de exibição para quadra.

    Este é um truque sorrateira. exibição de bloco normalmente faz com que um elemento de agir como um elemento de nível de bloco dentro do seu recipiente. No caso de uma âncora, o botão inteiro se torna clicável, não apenas o texto. Isso faz com que sua página mais fácil de usar porque o rato tem um alvo muito maior para apontar para:

     display: BLOCO

13. Proporcionar uma pequena folga para separar cada elemento.

    Use o -margem inferior governar para separar cada botão. Isto irá aumentar o efeito 3D, fazendo as sombras mais evidente.

    -margem inferior: 2px;

14. Fornecer um raio de fronteira para os cantos arredondados.

    O uso do fronteira-raio propriedade dá os cantos um efeito arredondado agradável, melhorando o botão sensação.

15. Use uma fronteira início de um pouco mais dimensão.

    Definir a fronteira para início pode dar os botões apenas um pouco mais apelo 3D.

16. Faça o botão deprimir quando o mouse passa sobre uma âncora:

    #menu a: hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px cinza-border: none;}

    Quando o mouse passa sobre o botão, a sombra é menor, e a cor do elemento de fundo é mais escuro. Você também pode remover a borda, fazendo o botão sentir plana. Estas técnicas juntos dão uma ilusão convincente do botão estar deprimido.

Esta lista faz um menu de navegação ideal, especialmente quando colocado dentro de uma coluna de um layout flutuante várias colunas.

O truque sombra é fácil, mas existem muitas variações. Se preferir, você pode construir duas imagens de botão vazios (um para cima e outro para baixo) no seu editor de imagem e simplesmente trocar as imagens de fundo em vez de alterar as sombras. Algumas variações também envolver a alteração da fronteira.