Menú Flotante Nro1

Diseño // Añadir Un Gadget // HTML/Javascript

Pegar El Siguiente Codigo:

<style type="text/css">
a.one{
background: #fff; /* COLOR FONDO INICIAL*/
color:#fff;
font-family:calibri;
font-size:12px;
text-decoration: none;
width:13px;
height:13px;
display:inline-block;
overflow:hidden;
padding:2px;
margin:5px;
-webkit-transition: all 0.5s ease-in-out;
-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;
border-radius:333px;
}
a.one:hover{
width:70px;
color:#fff;
background: #F80973; /* COLOR FONDO 1 HOVER */
}
a#one:hover{
width:70px;
color:#fff;
background: #A6EF07; /* COLOR FONDO 2 HOVER */
}
</style>
<div style="position:fixed; top:200px;left:20px;">
<a class="you" style="border: 2px solid #F80973;" href=""><span style="padding-left:20px;">link</span></a><br>
<a class="you" id="you" style="border: 2px solid #A6EF07;" href=""><span style="padding-left:20px;">link</span></a><br>
<a class="you" style="border: 2px solid #F80973;" href=""><span style="padding-left:20px;">link</span></a><br>
<a class="you" id="you" style="border: 2px solid #A6EF07;" href=""><span style="padding-left:20px;">link</span></a><br>
</div>

NOTA:
style="border: 2px solid #COLOR BORDE 1;"
id="you" style="border: 2px solid #COLOR BORDE 2;"

CREDITOS