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:

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 um pedido 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 chamado.

    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 apenas quando eles estão dentro de uma div.

  7. Retirar as balas, definindo a 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:

     width: 5em-

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

  9. Retirar a margem usando um negativo margin-left valor, como mostrado aqui:

     margin-left: -2.5em-

    Listas de ter 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 de os recortes. Substituir o comportamento de recuo padrão definindo para um valor negativo margin-left 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 de uma sombra de 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, para que possa 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 um elemento agir como um elemento de nível de bloco dentro de seu recipiente. No caso de uma âncora, o botão fica todo clicado, 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. Fornecer um pequeno espaço para separar cada elemento.

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

    margin-bottom: 2px;

  14. Fornecer um raio de borda para cantos arredondados.

    Uso do border-radius propriedade dá os cantos arredondados um efeito 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 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 escura. Você também pode remover o limite, fazendo o botão sentir plana. Estas técnicas em conjunto dar uma ilusão convincente de o 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.

Semelhante

menu