Menu - Simple Pink


Hey pixels! Batemos a meta de 20 seguidores \õ/ ! Obrigada a todos que contribuíram com essa meta, é muito bom saber que vocês gostam desse pequeno bloguinho. Enfim estou adorando estar com um layout tão calminho em tons bem clarinhos que não cegam, acho que é sempre bom usar tons claros depois de um layout mais agitado, como a antiga versão que eu tinha feito, eu usei tons mais fortinhos, e agora estou apostando em tons que harmonizam o template, é também estou usando o pink, minha cor favorita ♥.

Bom hoje eu resolvi trazer um tutorial, faz um tempinho que não posto um tutorial, e então fiz um menuzinho bem simples, mas ficou com uma aparência fofa, já que mistura vários tons de rosa, mas podem ficar a vontade para trocar as cores para qualquer outro tom desejado. Mais aconselho usar tons claros pois se exagerar pode ficar muito cegante. Se quiserem ver o preview click aqui. Bom espero que gostem do menu pixels acebolados, e até o próximo post!



                       Primeiro abra o HTML do seu blog, pressione ctrl + f e procure por: ]]></b:skin>.
                                   Quando achar cole o código abaixo acima da tag: ]]></b:skin>.

.Simplepink {
background: #FFC0CB;
font-family: verdana;
font-size: 9px;
font-color: #1C1C1C;
text-align: center;
width: 65px;
margin: 1px;
display: inline-block;
height: 14px;
border:  2px solid #FF6A6A;
}
.Simplepink:hover {
background: #FFB6C1;
font-family: verdana;
font-size: 9px;
font-color: #1C1C1C;
display: inline-block;
text-align: center;
width: 65px;
height: 14px;
border:  2px solid #FF6A6A;
margin: 1px;
border-radius: 2px;
letter-spacing: 2px;
-webkit-transition-duration: .50s;
}
     Em um gadget HTML/JavaScript cole:
<div class="Simplepink"><a href="Link da página">Nome da página</a></div>

8 comentários: