Créer un effet de bord biseauté  sur un bouton

Il faut  une source d'éclairage pour créer les ombres et les lumières sur les contours d'un bouton en relief. Si la source d'éclairage se trouve au-dessus et légèrement à gauche du bouton, alors les côtés supérieur et gauche du bouton seront plus clairs que la surface du bouton, tandis que les côtés inférieur et droit seront plus foncés.

Le secret de l'effet 3D consiste donc à utiliser des bordures CSS pour simuler les côtés du bouton et donner à chaque bordure une couleur légèrement différente, selon qu'elle représente un côté éclairé ou dans l'ombre. Pour paraître réalistes, les bordures doivent présenter des coins en onglet, impératif que remplissent pleinement les bordures CSS.

il existe une propriété de bordure CSS capable de produire automatiquement une assez bonne réplique d'un effet de bord biseauté. Il suffit de préciser inset ou outset comme attribut de border-style pour les styles de votre bouton. Le navigateur s'occupe de rendre les bordures du bouton en utilisant des tons légèrement différents de la couleur d'arrière-plan pour obtenir l'effet voulu. L'attribut outset simule les bords ombrés d'un bouton en relief et l'attribut inset simule un bouton enfoncé en inversant l'ombrage.