Menú Vertical con Efecto Pushbutton

Este menú vertical con cuenta con un bonito efecto pushbutton, lo puedes utilizar en tu blog. El autor es Cssplay y es un menú fácil de agregar en el blog.

El efecto de este menú se llama Pushbutton (pulsar un botón) cuando pasas el mouse por encima de los botones este pareciera que se hunde, es un efecto muy interesante y lo puedes ver funcionando en mi blog de pruebas.

Para ponerlo en tu blog ve a Diseño > Edición de HTML antes de ]]></b:skin> pega el estilo CSS siguiente:


/* Menú Vertical
----------------------------------------------- */
#menu a, #menu a:visited {
  position:relative;
  text-decoration:none;
  text-align:center;
  background-color:#9ab;
  color:#fff;
  display:block;
  width:10em;
  border:2px solid #fff;
  border-color:#def #678 #345 #cde;
  padding:0.25em;
  margin:0.5em auto;
  }
#menu a:hover {
  top:2px;
  left:2px;
  color:#fff;
  border-color:#345 #cde #def #678;
  }


Ahora ve a Diseño > Añadir un gadget elije HTML/Javascript y pega el siguiente código:


<div id="menu">
  <a href="tu-enlace">Item 1</a>
  <a href="tu-enlace">Item 2</a>
  <a href="tu-enlace">Item 3</a>
  <a href="tu-enlace">Item 4</a>
  <a href="tu-enlace">Item 5</a>
</div>


Cambia lo que está en rojo por la URL de tu enlace. Item1, Item2, etcétera. Por el nombre de tu enlace.
Si quieres cambiar el color de los botones,  cambia lo que está en verde en el primer código por el código del color que te guste, te dejo una tabla con códigos de colores.
También puedes carbiar el color de los bordes de los botones cambiando el código del color que te guste en lo que está en azul.