Bueno trevol.
Lo prometido es deuda.
Aquí tienes los botones cuadrados alineados horizontalmente, con separación entre ellos, y cada uno con su color:
Código html:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> * {margin:0;padding:0; border:0; outline:none; position: relative;}
ul#navlist {
margin-left: 50px;
padding-left:150px ;
}
#navlist li {
display:table;
float:left;
height:8em;
list-style-type:none;
margin:15px;
width:8em;
}
#navlist a {
display:table-cell;
height:100%;
position:relative;
text-align:center;
vertical-align:middle;
text-decoration: none;
color: #444;
border: 1px inset #660;
}
#navlist a:link.uno {background: #63f;}
#navlist a:link.dos {background: #93f;}
#navlist a:link.tres {background: #f3f;}
#navlist a:link.cuatro {background: #39f;}
#navlist a:link.cinco {background: #c9f;}
#navlist a:hover {
color:#cdcdcd;
border: 1px outset #69f;
}
#navlist a:hover.uno {background: #600;}
#navlist a:hover.dos {background: #900;}
#navlist a:hover.tres {background: #f00;}
#navlist a:hover.cuatro {background: #360;}
#navlist a:hover.cinco {background: #c60;}
<li><a class="uno" href="#">Item one
</a></li> <li><a class="dos" href="#">Item two
</a></li> <li><a class="tres" href="#">Item three
</a></li> <li><a class="cuatro" href="#">Item four
</a></li> <li><a class="cinco" href="#">Item five
</a></li>