I. Traduction▲
Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, CSS buttons with icons but no images.
II. Introduction▲
En tant que développeur Web, nous sommes rarement à l'aise avec les images et si nous pouvons éviter de les utiliser nous le faisons.
C'est pourquoi nous allons nous intéresser aujourd'hui à la création de boutons avec des icônes sans utiliser d'images pour générer ces icônes. Pour cela, nous allons voir qu'il est possible d'utiliser le CSS.
III. Créer le bouton▲
En premier lieu, nous devons le créer.
Pour cela, nous allons utiliser un simple bouton rectangulaire CSS3 avec des bords arrondis.
Copiez le code CSS suivant pour le créer :
.buttons
{
display: inline-block;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
border: 1px solid #a1a1a1;
padding: 0 2em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
}IV. Ajouter le sélecteur :before▲
Maintenant que nous avons créé notre bouton, nous devons ajouter le sélecteur :before qui va nous permettre par la suite d'ajouter du contenu à nos boutons.
Tout ce que nous avons besoin de faire est d'ajouter un padding et un margin pour positionner le sélecteur :before au bon endroit.
Copiez le code CSS suivant pour positionner votre sélecteur :
.buttons:before
{
float: left;
width: 1em;
text-align: center;
font-size: 1.7em;
margin: 0 0.5em 0 -1em;
padding: 0 .2em;
pointer-events: none;
}Maintenant afin de mettre une icône en utilisant le CSS nous avons besoin d'ajouter la propriété CSS de contenu content.
Une fois que nous avons du contenu dans le sélecteur :before nous pouvons créer de nouvelles classes CSS pour les différents contenus que nous voulons utiliser.
Vous trouverez ci-dessous une liste non exhaustive des icônes qu'il est possible d'utiliser pour vos boutons CSS.
V. Boutons de formulaire▲
Ci-dessous les boutons que vous pouvez utiliser pour vos formulaires.
VI. Boutons monétaires▲
Si vous voulez afficher des informations monétaires dans vos boutons.
VII. Boutons de température▲
Affichez les symboles de température Celsius et Fahrenheit.
VIII. Boutons avec symboles mathématiques▲
Il existe énormément de symboles mathématiques, ci-dessous une liste non exhaustive de ceux qui peuvent être utiles.
/*Math*/
.pi:before { content: "\213C"; }
.one_thrid:before { content: "\2153"; }
.two_thrid:before { content: "\2154"; }
.one_fifth:before { content: "\2155"; }
.two_fifth:before { content: "\2156"; }
.three_fifth:before { content: "\2157"; }
.four_fifth:before { content: "\2158"; }
.one_sixth:before { content: "\2159"; }
.five_sixth:before { content: "\215A"; }
.one_eighth:before { content: "\215B"; }
.three_eighth:before { content: "\215C"; }
.five_eighth:before { content: "\215D"; }
.seven_eighth:before { content: "\215E"; }
.quarter:before { content: "\00BC"; }
.half:before { content: "\00BD"; }
.three_quarter:before { content: "\00BE"; }IX. Boutons avec flèches▲
Vous pouvez afficher différents types de flèche.
/*Fleches*/
.next:before { content: "\279C"; }
.left_arrow:before { content: "\2190"; }
.up_arrow:before { content: "\2191"; }
.right_arrow:before { content: "\2192"; }
.down_arrow:before { content: "\2193"; }
.up_left_arrow:before { content: "\2196"; }
.up_right_arrow:before { content: "\2197"; }
.down_left_arrow:before { content: "\2199"; }
.down_right_arrow:before { content: "\2198"; }X. Autres boutons▲
Il y a plein d'autres icônes utilisables, ci-dessous quelques-unes des plus utiles.
/*Symboles*/
.like:before { content: "\2764"; }
.star:before { content: "\2605"; }
.spark:before { content: "\2737"; }
.play:before { content: "\25B6"; }
.watch:before { content: "\231A"; }
.blacksun:before { content: "\2600"; }
.cloud:before { content: "\2601"; }
.umbrella:before { content: "\2602"; }
.snowman:before { content: "\2603"; }
.blackstar:before { content: "\2605"; }
.whitestar:before { content: "\2606"; }
.blackphone:before { content: "\260E"; }
.whitephone:before { content: "\260F"; }
.saltire:before { content: "\2613"; }
.hot_drink:before { content: "\2615"; }
.skull:before { content: "\2620"; }
.radioactive:before { content: "\2622"; }
.biohazard:before { content: "\2623"; }
.peace:before { content: "\262E"; }
.yingyang:before { content: "\262F"; }
.frowning_face:before { content: "\2639"; }
.smiling_face:before { content: "\263A"; }
.first_quarter_moon:before { content: "\263D"; }
.last_quarter_moon:before { content: "\263E"; }
.wheelchair:before { content: "\267F"; }
.recycle:before { content: "\267D"; }
.recycle2:before { content: "\267C"; }
.music_note:before { content: "\266C"; }
.warning:before { content: "\26A0"; }
.male_and_female:before { content: "\26A4"; }
.scissors:before { content: "\2701"; }
.airplane:before { content: "\2708"; }
.snow:before { content: "\2042"; }XI. Conclusion▲
Nous avons vu dans ce tutoriel comment créer simplement des boutons avec icônes sans avoir à recourir à l'insertion d'images. Vous pouvez vous amuser à chercher d'autres codes correspondants à d'autres icônes !
XII. Liens▲
Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.
Ci-dessous une liste non exhaustive de sites où vous pourrez trouver les codes hexadécimaux des icônes :
XIII. Remerciements▲
Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.