Créer de beaux boutons en CSS3

Il n'est pas besoin aujourd'hui d'être un as du développement pour créer des boutons mais, créer de beaux boutons full CSS, c'est une autre paire de manches. Voici donc quelques pistes pour ceux qui veulent se lancer.

1. Pour ceux qui ne connaissent rien aux CSS3 mais qui veulent s'y aventurer, il y a la solution des generators de boutons. On en trouvent de plus en plus ; il ne vous feront pas des boutons très originaux mais cela vous permettra de commencer par l'exemple dans l'application de CSS3. Voici donc deux adresses :

- L'ébourifant CSS Trick : l'outil est vraiment sympa même s'il a des limites évidentes (notamment celles de l'originalité !). On peut se rendre compte immédiatement des modifications d'apparence lors de la modifications des attributs.

- Pour ceux qui ne parlent pas anglais, vous trouverez sur le site Dji un outil à peu près équivalent en français mais beaucoup moins ergonomique :-(

2. Pour trouver l'inspiration ou des techniques novatrices :

- Un exemple bluffant de boutons/icones de partage sur les réseaux sociaux par Nicolas Gallagher. Non, vous ne rêvez pas, ce que vous voyez ci-dessous est fait uniquement avec des CSS !

Pour voir la démo : http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/
Pour lire les explications : http://nicolasgallagher.com/experimental-pure-css-social-media-icons/

- Un autre exemple d'excellente utilisation de plusieurs techniques CSS3 pour un rendu très original :

Pour consulter le tutorial : http://lab.simurai.com/css/buttons/
Je signale à toutes fins utiles que la typographie du bouton rose ci-dessus est obtenu grâce à un import de typographie depuis Google. Pour en savoir plus : http://code.google.com/webfonts/family?family=Lobster

- Pour ceux qui veulent maîtriser la technique des dégradés en CSS3 :

Le tutorial est accessible ici : http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/

- Un autre superbe bouton utilisant l'import de font pour créer un picto auquel est ajouté un effet "glossy" :

Le tutorial : http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/

Voilà. Si vous avez d'autres tutos et exemples de ces techniques, n'hésitez pas à laisser vos liens en commentaires.

Comments

[Caroder]

Hello Cat. I really appreciate your compliment, thank you :-)
If you want to add social media sharing to your Wordpress blog (not only social media profil like i did in the FreeDream theme), you have to use first a plugin to add the right code to your page.
There is many plugins to do this. You can find some ideas here : http://millionclues.com/guest-posts/10-great-social-media-plugins-for-wordpress/
Each plugin propose its own way to insert buttons in the page so you have to study the code before to replace the existing buttons by the HTML5 buttons.
I hope my answer will help :-)

[Cat Baker]

Hi,

I downloaded your FreeDreamer template for my blog and everybody LOVES it...Including me...

My question is, I would like to add buttons listed above (under # 2) but I'm not fluent in FRENCH...Is there an easy way to translate your directions above?

Please let me know and THANK YOU for a beautiful blog template...

Best,
Cat