Chapitre 2
Interface et menus

Retour Accueil CSS

17 Boutons

Termes CSS clés employés : radial-gradient, border-radius.
Compatibilité navigateurs : IE9+, Firefox4+, Chrome5+, Safari5+, Opera10.5+.

Problématique

Créer en pur CSS des boutons inhabituels : ici, des boutons d’ascenseur ronds.

Résolution théorique

Créer des boutons n’a rien de compliqué. Des boutons ronds, plus… Heureusement, la propriété border-radius permet d’obtenir une boîte avec des coins arrondis. Si l’angle (le rayon) de l’arrondi est égal à la moitié de la largeur d’un élément carré, celui-ci devient rond…

Résolution pratique

En HTML, un simple DIV conteneur, renfermant ici cinq éléments DIV :
<DIV class=cadre> <DIV class="bouton">1</DIV> … <DIV class="bouton">5</DIV> </DIV>
En CSS, rien de bien complexe non plus. D’abord la définition de l’élément conteneur :
DIV.cadre {width:500px; margin: 5px auto 10px; height:100px; border: 10px double black; }
Puis celle des éléments DIV de classe bouton. Ils sont définis comme flottants, leur taille étant ajustées pour que les cinq boutons tiennent dans le conteneur.
DIV.bouton { float:left; width:90px; height:90px; margin: 2px; }
Ajoutez les propriétés de bordure, ainsi qu’un dégradé radial comme image de fond :
div.bouton { … border: 3px solid grey; border-radius:45px; background-image: radial-gradient(white, grey); }
Puis définissez les propriétés de texte nécessaires pour obtenir de gros chiffres centrés.
DIV.bouton { … font-color:black; font-weight : bolder; font-size :58pt; text-align: center; vertical-align:middle; }
Et enfin un petit effet, grâce à la pseudo-classe :hover, lorsque le pointeur est au-dessus d’un bouton…
DIV.bouton:hover {background-image: radial-gradient(yellow, orange);}

Boutons

1
2
3
4
5

Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque
Get Firefox!