Menu Colorido (Horizontal)

Achei esse menuzinho lindo em um dos meus layouts antigos e decidi trazer para vocês, ele é lá do Candylland infelizmente não existe mais... o que é uma grande pena, pós era um ótimo site. Aprendi tantas e tantas coisas lá, não sei o motivo de não existir mais... fiquei muito triste ao entrar tempo atrás e não existir. Mas de toda forma irei creditar, afinal o menu é de lá. O menuzinho é bem simples porém bem fofinho, acho que combina muito com layouts clean de preferência com tons pasteis. Ele é todo coloridinho, mais abaixo deixarei uma amostra do menu. Ele é bem pratico e fácil de se colocar, então vamos, lá? Lets Go!!!

Resultado:

Home Facebook Twitter Tumblr

1. Vá ate seu HTML e adicione o código abaixo, antes de ]]></b:skin>:

Códigos

a.mc {
width: 100px;
height: 100px;
color:#ffffff;
background: #FFD6E3;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc1 {
width: 100px;
height: 100px;
color:#ffffff;
background: #C1E3F2;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc1:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc2 {
width: 100px;
height: 100px;
color:#ffffff;
background: #E3AAD6;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc2:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc3 {
width: 100px;
height: 100px;
color:#ffffff;
background: #E1F5C4;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc3:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}

2. Salve! Agora vá ate Layout  ou onde desejar que o menu apareça, cole o seguinte código:

Códigos

<a class="mc" href="URL-LINK-1">NOME DO LINK</a>
<a class="mc1" href="URL-LINK-2">NOME DO LINK</a>
<a class="mc2" href="URL-LINK-3">NOME DO LINK</a>
<a class="mc3" href="URL-LINK-4">NOME DO LINK</a>

XoXo~