Boutons CSS: Tutoriels et exemples
La création de boutons avec CSS est l'une des techniques de conception Web les plus expérimentées. Les exemples et les tutoriels ne manquent pas.
La plus grande tendance récente en matière de conception de boutons CSS semble être l'élimination des images, en particulier des images d'arrière-plan, des boutons. Mais il y a beaucoup d'autres choses que font les concepteurs avec des boutons, d'autres qui incluent des images.
Nous avons rassemblé ci-dessous plus de vingt didacticiels, exemples et outils de création de boutons CSS, dont la plupart utilisent CSS3.
Des boutons sont disponibles pour quasiment tous les styles de design. Nous avons essayé de nous concentrer sur des techniques plus récentes, en laissant de côté les techniques de longue date (comme le méthode de porte coulissante pour créer des coins arrondis) que la plupart des concepteurs connaissent déjà.
Si vous avez d'autres tutoriels ou exemples que vous souhaitez partager, merci de le faire dans les commentaires!
Tutoriels et articles
Redécouvrir l'élément bouton
Un article vraiment utile sur la button élément en CSS, qui est souvent négligé par les concepteurs. Il est un peu plus ancien, mais contient encore des tonnes d’informations utiles sur la création de boutons plus stylés avec CSS.
Beaux boutons CSS avec jeu d'icônes
Voici un autre article qui explique comment créer des boutons avec des icônes, tout en utilisant span classes plutôt que le button élément.
Construire des boutons pratiques CSS3
Ce tutoriel vidéo de Nettuts + montre comment créer des boutons CSS3 pratiques qui incluent même ce qui semble être une image d'icône d'oiseau Twitter, mais qui est en fait entièrement créée avec CSS3.
Beaux boutons de type Photoshop avec CSS3
Bien que les boutons ne soient pas particulièrement avant-gardistes en termes d’apparence, ce qui est étonnant, c’est qu’ils ont été créés entièrement à l’aide de CSS3, sans utiliser d’images, et qu’ils ne reposaient que sur des boutons créés dans Photoshop.
Amélioration des interactions entre boutons et navigation
Il s’agit d’un excellent didacticiel de Darren Hoyt sur la création de meilleurs comportements pour vos boutons, qui encourage les visiteurs à interagir avec votre site.
Boutons super géniaux avec CSS3 et RGBA
Ce tutoriel de Zurb traite de l’utilisation de CSS3 et du mélange alpha avec RGBA pour créer des boutons évolutifs avec une seule image PNG.
Création de beaux boutons avec des dégradés CSS
Un tutoriel pour construire un bouton utilisant des dégradés CSS similaires à ceux utilisés par Mozilla pour Firefox Personas.
Comment concevoir un bouton sexy à l'aide de CSS
Ce tutoriel montre comment créer un gros bouton dynamique sans utiliser d'images.
Boutons CSS3 à l'aspect réaliste
Ce sont des boutons simples, créés entièrement avec CSS3, y compris des pseudo-éléments.
Jolis boutons CSS3
Ce didacticiel montre comment créer un bouton simple, légèrement brillant, évolutif et pouvant être créé dans n'importe quelle couleur sans images.
Boutons CSS3 sans aucune image
Un tutoriel simple pour créer des boutons dynamiques qui utilisent uniquement CSS3 et pas d'images. Il y a quatre états pour chaque bouton, y compris les états désactivés, survolés et cliqués.
5 tutoriels différents de boutons de liens dynamiques de coins ronds CSS
Ceci est une collection de cinq tutoriels différents pour créer des boutons CSS avec des coins arrondis. Deux incluent l'utilisation d'images, mais les trois autres ne le font pas.
Créez un bouton CSS3 qui se dégrade bien
Tant que tous les navigateurs ne prendront pas correctement en charge CSS3, nous allons rencontrer des problèmes lorsque nous l’utilisons pour créer des éléments tels que des boutons. Ce tutoriel montre comment créer d'excellents boutons CSS3 qui ont aussi l'air bien dans les anciens navigateurs, comme IE6 et 7.
Barre de navigation d'Apple utilisant uniquement le CSS
Ce tutoriel montre comment recréer le menu de navigation de style bouton sur le site Web d'Apple. Cela fonctionne mieux dans Safari 3+, mais semble toujours bien dans d'autres navigateurs.
Créer un bouton d'appel à l'action CSS3
Ce tutoriel montre comment créer un bouton d'appel à l'action entièrement avec CSS qui inclut différents états par défaut et de survol.
Boutons sexy avec CSS3
Ce didacticiel simple montre comment créer des boutons joliment stylés avec des états de vol stationnaire et actifs uniques. Les boutons peuvent être mis à l'échelle et leur couleur peut être facilement modifiée.
Boutons brillants sans images utilisant uniquement CSS3
En regardant ces boutons, il est difficile de croire qu'ils sont fabriqués sans images, à moins de regarder de très près. Le code est compliqué, mais le résultat final est superbe, avec un effet de vol stationnaire.
Boutons CSS3 avec des icônes
Ce tutoriel montre comment créer des boutons CSS3 avec des dégradés qui incluent également des images d’icône et qui sont compatibles avec tous les navigateurs.
Faites rouler vos propres boutons Google
Ce tutoriel montre comment créer des boutons évolutifs de style Google avec des bordures colorées. Les résultats finaux sont minimalistes et propres.
Exemples et outils
10 impressionnants boutons CSS3 à utiliser sur votre site web
Voici une collection de dix boutons que vous pouvez utiliser sur votre site Web. Ils sont tous assez simples mais sont créés en utilisant uniquement CSS3 sans images.
Boutons de dégradé CSS3
Ceci est une énorme collection de boutons CSS3 de Web Designer Wall. Inclus sont une variété de formes, tailles et couleurs, toutes avec des dégradés. L'une des meilleures parties à leur sujet, cependant, est la façon dont ces boutons se dégradent avec élégance dans les navigateurs qui ne sont pas totalement compatibles avec CSS3.
Fabricant de bouton
CSS-Tricks propose ce créateur de bouton CSS3 gratuit. Définissez simplement les couleurs d'arrière-plan pour chaque état du bouton, la taille et les attributs de texte, et il créera le code CSS pour vous.
Boutons radioactifs
Ces boutons utilisent des animations CSS dans Safari pour créer un effet lumineux pulsé. Dans d'autres navigateurs prenant en charge CSS3, ils sont toujours parfaitement fonctionnels et semblent très bien.
Connaissez-vous d'autres techniques pour créer des boutons CSS impressionnants qui n'ont pas été mentionnés ici? Ou avoir un exemple préféré? Merci de les partager dans les commentaires!