"Botones" perfectamente flexibles, con los que también cambia el texto cuando presiona el botón.
<div id="buttons">
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">Productos </a></li>
<li><a href="#">Servicios </a></li>
<li><a href="#">Referencias </a></li>
<li><a href="#">Contacto </a></li>
<li><a href="#">Impreso </a></li>
</ul>
</div>
#buttons {
width: 20em;
}
#buttons ul {
list-style: none;
}
#buttons ul li {
margin-top: 4px;
}
#buttons ul li a {
display: block;
background-color: #ccc;
color: #000;
text-decoration: none;
padding: 2px 0 3px 10px;
border: 1px solid;
border-color: #fff #757575 #757575 #fff;
font-weight: bold;
}
#buttons ul li a:hover {
background-color: #dfdfdf;
color: #757575;
padding: 3px 0 2px 11px;
border: 1px solid;
border-color: #757575 #fff #fff #757575;
}
* html ul li a {
height: 1%; /*hasLayout*/
}
adicional:
#buttons ul li a {
border-left: 10px solid #600;
}
#buttons ul li a:hover {
border-left: 10px solid #060;
}