vendredi 27 juillet 2007, 13:39
Comment réaliser un bouton façon 3D tout en CSS ?
Par Sven CAILTEUX - CSS - Lien permanent
Voici une petite astuce qui vous permettra d'obtenir un effet intéressant.
En utilisant les bordures et la propriété "outset", on peut donner l'illusion d'un bouton en 3D à un simple lien.
Voici le code CSS :
.dimension{
color: white;
background-color: #4CB7ED;
border: 2px #4CB7ED outset;
padding: 1px 4px;
text-decoration: none;
font-family:"Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
font-weight:bold;
font-size:0.95em;
}
.dimension:visited{
color: white;
}
.dimension:hover{
border-style: inset;
background-color: #8ED3F5;
padding: 2px 3px 0 5px; /* déplacement du texte d'un pixel à droite et en bas */
}
.dimension:active{
color: white;
}
aucun commentaire