Como fazer um link de texto olhar como um botão chanfrado com css

instruções

1. Comece com uma lista desordenada velho liso no HTML da sua página web. Dê a lista de id.

   

2. Em sua folha de estilo CSS que você precisa fazer várias coisas para tornar o visual lista como botões chanfrados. Comece por denominar a própria lista. Retirar as balas e ajustar as margens e preenchimento de acordo com seu design.

   nav ul {

   list-style: none;
   margin: 0-
   padding: 0-
   padding-top: 1em-
   }

3. Se você deseja que a lista para exibir horizontalmente na parte superior da sua página web, adicionar esta regra CSS para a folha de estilo:

   li nav {

   display: inline-
   }

4. 
   
   
   

   Atribuir algumas regras de estilo CSS para a cor, a cor de fundo e propriedades de fronteira para a a: link e a: elementos visitados. A cor de fundo e as bordas criará uma aparência como um botão chanfrada fora do link de texto.

   Algo assim:

   nav a: link, #nav a: visited {

   color: # 000-
   background-color: # D6AE00-
   border-top: 1px solid # CCC-
   border-right: 1px solid # 666-
   border-bottom: 1 px solid # 666-
   border-left: 1 px solid # CCC-
   }

5. Para dar uma aparência do botão sendo pressionado quando no estado em foco, simplesmente inverter as cores da beira.

   Algo assim:

   nav a: hover {

   border-top: 1px solid # 666-
   border-right: 1px solid # CCC-
   border-bottom: 1 px solid # CCC-
   border-left: 1 px solid # 666-
   }

6. Você pode experimentar com as cores, use uma imagem de fundo em vez de simplesmente uma cor de fundo e fazer muitas coisas com o preenchimento e colocação de este menu, mas você tem os princípios de criar a ilusão botão chanfrada em CSS com apenas esta quantidade de código.