En donnant à chaque lien du menu une crête frontalière contrastant avec les couleurs de fond en haut / gauche et droite / bas, le résultat est un menu du bouton légèrement biseautés.
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
<style type="text/css">
.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}
.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/
background-color: #704968;
text-decoration:none;
}
.buttonmenu li a:visited{
color: white;
}
.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}
</style>
Le code html
<ul class="buttonmenu">
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
<li><a href="votre lien ici">votre page ici</a></li>
</ul>
0 commentaires:
Enregistrer un commentaire