4 estilos para menú !

Buenas buenas, hace mucho no me presentaba por acá (｡o_o｡)"". Admito que extrañé bastante el blog, y decidí volver y modificarlo ya que extrañaba verlo en su toque "kawaii".

Quiero retomar los tutoriales y traerles más cositas que tengo para compartirles.

Así que sin más que decir, aquí les va el primer tutorial del año ૮( ๑ᵔ ᵕ ᵔ๑ )ა.

4 estilos de Menú simple hover

Todos estos menús son simples, solo necesitas copiar el código del menú que prefieras y pegarlo en un gadget HTML.

Diseño > Añadir Gadget HTML

Copia y pega el código de tu preferencia ˖⁺‧₊˚♡˚₊‧⁺˖

 Live preview 

ESTILO 1

 <style>

.tablo{

font-size:12px;

color:black;

text-transform:uppercase;

background:#FFF9FA;

font-family:century gothic;

text-decoration:none;

padding:3px;

width: 50px;

display:inline-block;

border:1px solid #FFE3E6;

margin-top: 5px;margin-bottom: 5px;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.tablo:hover {

background:#FFC6CF;

color:white;

}

</style>

<center>

<div style="background: #FFEBED;width:260px;border: 2px solid #FFEEEE;margin-bottom:7px; margin-top:7px;box-shadow:0px 2px 2px 2px #ffeeee;border:3px solid #ffffff;">

<a class="tablo" href="LINK">Home</a>

<a class="tablo" href="LINK">About</a>

<a class="tablo" href="LINK">Stuff</a>

<a class="tablo" href="LINK">Linky</a>

</div>

</center>

ESTILO 2 

 <style>

.haha{

width:60px;height:40px;

box-shadow:0px 0px 2px 3px #FFE9C6;

background:#FFF9E1;

font:12px century gothic;

text-align:center;

Text-decoration:none;

color:#888888;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

padding-bottom:5px;

padding-top:20px;padding-left:0px;padding-right:0px;

display:inline-block;

border-bottom-left-radius: 35px;

border-bottom-right-radius: 35px;

}

.haha:hover{

background:#FFFFFF;

color:#777;

border-top-right-radius: 35px;

-webkit-transform: rotate(-50deg) ;

-moz-transform: rotate(-50deg) ;

-o-transform: rotate(-50deg) ;

-ms-transform: rotate(-50deg) ;

}

</style>

<center>

<a class="haha" href="LINK">Home</a>

<a class="haha" href="LINK">About</a>

<a class="haha" href="LINK">Stuff</a>

<a class="haha" href="LINK">Linky</a>

</center>

ESTILO 3 

 <style>

.lola{

width:51px;height:35px;

padding-top:17px;

text-transform:uppercase;

border: 1px solid #E7F4FF;

background:#EFF8FF;

font:12px century gothic;

text-align:center;

Text-decoration:none;

color:#333333;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

margin:5px;margin-bottom:20px;

display:inline-block;

border-radius: 100%;

}

.lola:hover{

background:#FFFFFF;

color:#FFFFFF;text-shadow:0px 37px 0px #333333;

-webkit-transform: rotate(-360deg) ;

-moz-transform: rotate(-360deg) ;

-o-transform: rotate(-360deg) ;

-ms-transform: rotate(-360deg) ;

}

</style>

<center>

<a class="lola" href="LINK">Home</a>

<a class="lola" href="LINK">About</a>

<a class="lola" href="LINK">Stuff</a>

<a class="lola" href="LINK">Linky</a>

</center>

ESTILO 4 

<style>

.leaf {

width:45px;height:30px;

padding-top:15px;

text-transform:uppercase;

border: 3px solid #E2FFD5;

background:#E8FFE1;

font:11px century gothic;

text-align:center;

Text-decoration:none;

color:#333333;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

margin:3px;

display:inline-block;

border-radius: 100%;

border-top-right-radius:0px;

}

.leaf:hover{

background:#FFFFFF;

color:#000000;

border: 3px solid #E8FFE1;

background:#E2FFD5;

border-top-right-radius:100%;

border-bottom-left-radius:0px;

}

</style>

<center>

<div style="width:240px;padding:5px;background:#FFFCF2;box-shadow:0px 0px 2px 3px #FFF9E7;border:2px solid #ffffff;">

<a class="leaf" href="LINK">Home</a>

<a class="leaf" href="LINK">About</a>

<a class="leaf" href="LINK">Stuff</a>

<a class="leaf" href="LINK">Linky</a>

</div>

</center>

Todos los colores se pueden editar, y puedes elegirlos en esta página HTML Colors.

Espero que les haya gustado y le den buen uso! Hasta pronto  ૮₍˶ •. • ⑅₎ა ♡