CSS3 : boutons avec icônes sans images

Créer des boutons avec icônes sans avoir besoin d'utiliser des images

Paul Underwood

Traducteur

Sébastien Germez

Ce tutoriel va vous apprendre à créer des boutons avec des icônes en CSS3 sans avoir besoin d'utiliser des images pour ces derniers.

Commentez

- Titre : CSS3 : boutons avec icônes sans images

- Auteur : Paul Underwood

- Traducteur : Sébastien Germez

- Parution : 26 juillet 2012

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ®  Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

- III. Créer le bouton

- IV. Ajouter le sélecteur :before

- V. Boutons de formulaire

- VI. Boutons monétaires

- VII. Boutons de température

- VIII. Boutons avec symboles mathématiques

- IX. Boutons avec flèches

- X. Autres boutons

- XI. Conclusion

- XII. Liens

- XIII. Remerciements

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.

/*Formulaires*/
.add:before    { content: "\271A"; }
.edit:before   { content: "\270E"; }
.delete:before { content: "\2718";}
.save:before   { content: "\2714";}
.email:before  { content: "\2709";}
.cross:before  { content: "\2716"; }

VI - Boutons monétaires

Si vous voulez afficher des informations monétaires dans vos boutons.

/*Monnaie*/
.dollar:before { content:"\0024"; }
.euro:before   { content:"\20AC"; }
.pound:before  { content: "\00A3"; }
.cent:before   { content: "\20B5"; }

VII - Boutons de température

Affichez les symboles de température Celsius et Fahrenheit.

/*Temperature*/
.celsius:before    { content: "\2103"; }
.fahrenheit:before { content: "\2109"; }

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 :

- Unicode Codepoint Chart

- Unicode Standard, Version

- UTF-8 encoding table and Unicode characters

XIII - Remerciements

Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.