Menú tipo botones que se hunden al pasar el mouse por encima, sin imágenes, solo con CSS
Este menú nos servirá de ejemplo para este post.
¿Cómo lo he hecho?
<!-- CODIGO CSS -->
<style>
.buttonscontainer {
width: 120px;
}
.buttons a {
color: #FFFFFF;
border: 1px solid;
background-color: #000099;
padding: 2px;
padding-left: 3px;
font: 13px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
border-color: #0000FF #000066 #000066 #0000FF;
display: block;
margin: 0px;
width: 100%;
text-align: left;
}
.buttons a:hover {
border: 1px solid;
padding: 3px 1px 1px 4px;
background-color: #0000CC;
border-color: #000066 #0000FF #0000FF #000066;
color: #99FFFF;
text-decoration: none;
}
</style>
Como ves, es bien sencillo
<!-- CODIGO HTML --> <div class="buttonscontainer"> <div class="buttons"> <a href="http://www.espacioblog.com/davitociber/posts/archive">ArchivosContactoSuscríbete </div> </div>
Avisos para los comentarios:
Todo comentario con lenguaje inapropiado, obsceno, que utilice palabras abusivas o que ofenda al administrador de este blog o a otras personas no será bienvenido, así que por favor, enriquece este post enviando tus comentarios, pero no hagas spam e intenta que sean relevantes con el contenido del mismo, si no es así seran eliminados
Maria Silvina Lamarque dijo
Este menu si que es lindo, gracias !! por dejar estos conocimientos, me los llevo... ya los utilizare :)
20 Septiembre 2008 | 03:33 AM