Cute Menu Circ :)

Que onda blogueras ^^!!! Como siempre super rapidisimo les traigo un tuto queee espero les guste, es algo muy sencillo de hacer :)!!

para ponerlo en tu blog solo ve DISENO >> ANADIR GADGET HTML/JAVASCRIPT >> copiar el codigo y pegarlo en el gadget :)!!

Menu Preview:

Visualizar

Codigo:

<style>
a.circ, a.circ2, a.circ3, a.circ4, a.circ5{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;
color:#eee;font-family:arial;
text-transform:uppercase;font-size:1px;
width:30px;height:30px;
border:5px solid #FFD685;padding:2px;
border-radius:1000px;}
a.circ:hover, a.circ2:hover, a.circ3:hover, a.circ4:hover, a.circ5:hover{
color: #000000;font-size:5px;
-webkit-transform: scale( -2.0) rotate( 540deg);
-moz-transform: scale( -2.0) rotate( 540deg);}
a.circ{background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/Sintiacutetulo-1.png);border:5px solid #FFE0EC;}
a.circ2{background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/Sintiacutetulo-1.png);border:5px solid #E2DEF9;}
a.circ3{background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/Sintiacutetulo-1.png);border:5px solid #FAF9C8;}
a.circ4{background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/Sintiacutetulo-1.png);border:5px solid #D9F2FF;}
a.circ5{background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/Sintiacutetulo-1.png);border:5px solid #DEEAD1;}
a.circ:hover{background: #FFF4FC;}
a.circ2:hover{background: #F1EEFF;}
a.circ3:hover{background: #FFFEE4;}
a.circ4:hover{background: #E8F8FF;}
a.circ5:hover{background: #EEF5E8;}
</style><br />
<div style="left: 40px; position: fixed; top: 150px;">
<a class="circ" href="http://www.blogger.com/LINK"><br /><br />Tutorial</a>
<a class="circ2" href="http://www.blogger.com/LINK"><br /><br />Recursos</a>
<a class="circ3" href="http://www.blogger.com/LINK"><br /><br />Afiliados</a>
<a class="circ4" href="http://www.blogger.com/LINK"><br /><br />aqui tu categoria</a>
<a class="circ5" href="http://www.blogger.com/LINK"><br /><br />aqui tu categoria</a></div>

ROSADO: Direccion de la imagen que pondras en tu menu. Yo por ejemplo puse uno de Rilakkuma-ext 36px(Ancho-Width)x34px(Altura-Hitgh) medidas de photoshop :)!!

Ustedes decidiran que imagenes poner xD!!

Este es un poco diferente xD sin imagenes :)!

Menu Preview 2:

Visualizar

Codigo:

<style>
a.circ, a.circ2, a.circ3, a.circ4, a.circ5{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;
color:#fff;font-family:arial;
text-transform:uppercase;font-size:1px;
width:30px;height:30px;
border:5px solid #FFD685;padding:2px;
border-radius:1000px;}
a.circ:hover, a.circ2:hover, a.circ3:hover, a.circ4:hover, a.circ5:hover{
color: #fff;font-size:5px;
-webkit-transform: scale( -2.0) rotate( 540deg);
-moz-transform: scale( -2.0) rotate( 540deg);}
a.circ{border:5px solid #8533FF;}
a.circ2{border:5px solid #FFAD33;}
a.circ3{border:5px solid #85AD33;}
a.circ4{border:5px solid #1975FF;}
a.circ5{border:5px solid #FF2374;}
a.circ:hover{background: #8533FF;}
a.circ2:hover{background: #FFAD33;}
a.circ3:hover{background: #85AD33;}
a.circ4:hover{background: #1975FF;}
a.circ5:hover{background: #FF2374;}
</style><br />
<div style="left: 40px; position: fixed; top: 150px;">
<a class="circ" href="http://www.blogger.com/LINK"><br /><br />Tutorial</a>
<a class="circ2" href="http://www.blogger.com/LINK"><br /><br />Recursos</a>
<a class="circ3" href="http://www.blogger.com/LINK"><br /><br />Afiliados</a>
<a class="circ4" href="http://www.blogger.com/LINK"><br /><br />Categoria</a>
<a class="circ5" href="http://www.blogger.com/LINK"><br /><br />Categoria</a></div>

Que tengan buen fin de semana :)!!!