Tutoriel bouton CSS: Comment coder les boutons en 5 étapes simples

Ici, à Design Shack, nous aimons présenter une gamme complète de tutoriels, des projets PHP experts aux conseils CSS très simples. Tutoriel d’aujourd’hui est destiné à ceux qui sont encore dans les stades débutants de CSS.

Une des questions les plus fréquentes que je reçois des débutants CSS est, « Comment puis-je créer un bouton? » C’est une question simple avec une réponse compliquée. Il y a pas mal de façons de s’y prendre et, malheureusement, il y a aussi pas mal de façons de se tromper. Quand j’ai commencé dans CSS, comprendre toute la syntaxe bouton a été l’un des problèmes les plus persistants que j’ai rencontrés, il semblait que je le faisais toujours mal. Aujourd’hui, nous allons passer par un processus très simple et flexible que vous pouvez appliquer à n’importe quel bouton que vous créez. Plus important que le résultat final est l’explication approfondie à chaque point décrivant pourquoi nous le faisons de cette façon.

Étape 1: Le HTML

Croyez-le ou non, c’est l’une des parties les plus délicates. Pour un codeur expérimenté, il semble si simple. Pour un débutant cependant, savoir par où commencer avec un bouton peut être assez difficile. Devriez-vous utiliser la balise HTML « bouton »? Ou peut-être une étiquette de paragraphe? Quelles parties le lien doit-il enrouler?

Il s’avère que la syntaxe la plus simple et la plus largement utilisée est juste pour implémenter une étiquette d’ancrage simple vieux (boutons de formulaire utilisent souvent « entrée »). D’un point de vue fonctionnel, tout ce que nous essayons vraiment de créer est un lien qui, lorsqu’il est cliqué, nous emmène quelque part de nouveau, ce qui est exactement ce qu’un lien HTML de base ne. Souvent, dans la conception web, le choix de transformer quelque chose en bouton est simplement esthétique et n’indique pas nécessairement une fonctionnalité spéciale.

Voici un extrait largement utilisé de HTML qui obtient le travail fait parfaitement tout en restant gentil et succinct:

Si vous n’avez pas besoin d’un Div, n’utilisez pas un

Un problème que j’avais l’habitude de rencontrer quand j’ai commencé à coder, c’est que je pense souvent que j’avais besoin d’un div pour créer quoi que ce soit. En utilisant cette logique défectule, je voudrais envelopper mon ancre dans une div et ensuite appliquer la plupart du style à la div.

C’est complètement inutile cependant et peut créer des problèmes avec le clic et le vol stationnaire. Dans l’exemple ci-dessus, tout notre élément sera le lien. Si nous avons enveloppé cela dans un div et style que, seule la partie texte du bouton serait un lien, ce qui signifie que l’utilisateur pourrait éventuellement cliquer sur le bouton sans résultat.

Pourquoi utiliser une classe?

Peut-être la chose la plus importante à remarquer au sujet de cet extrait de code est que nous avons ajouté une classe, que j’ai génériquement étiqueté « bouton ». Il y a deux ou trois raisons à cela.

Tout d’abord, nous avons besoin d’un moyen de cibler et de style ce bouton dans notre CSS sans nécessairement cibler toutes les balises d’ancrage sur la page. Ce n’est presque jamais le cas que vous voulez que chaque lien soit un bouton identique. Cependant, il est faisable et très probable que vous voudrez en fait réutiliser le style de bouton à un moment donné. Pour cette raison, nous appliquons une classe au lieu d’une pièce d’identité. De cette façon, chaque fois que nous voulons convertir un lien en texte clair en un joli bouton, nous appliquons simplement notre classe « bouton » et nous avons terminé!

Aperçu de l’étape 1

À ce stade, vous ne devriez avoir qu’un lien de texte clair avec un style par défaut.

Étape 2 : Styles de boutons de base

Maintenant que nous avons notre HTML prêt à aller, il est temps de sauter par-dessus le CSS. N’oubliez pas que nous avons mis en place une classe « bouton » dans le but exprès de ciblage CSS alors assurez-vous de l’utiliser pour cette étape:

La première chose que nous voulons faire dans notre CSS est de définir la boîte de base qui fera notre forme de bouton. Voici les styles que j’ai utilisés. Notez que mes choix de couleurs et les dimensions sont complètement facultatifs, n’hésitez pas à utiliser ce que vous voulez.

La chose la plus importante que j’ai fait ici était de définir « affichage » à « bloc ». Cela nous permettra de transformer notre lien texte en une boîte plus grande avec une largeur et une hauteur définies. Après cela, j’ai simplement mis ma taille et la couleur de fond, puis a ajouté une bordure. Je vais utiliser « rgba » un peu, si vous voulez rendre cela un peu plus convivial pour les anciens navigateurs, consultez cet article sur la déclaration des retombées rgba.

Aperçu de l’étape 2

Après la deuxième étape, vous devriez avoir une boîte assez ennuyeux à la recherche avec certains impossible de lire du texte à l’intérieur.

Étape 3 : Styles de texte

Ensuite, il est temps d’attaquer ce texte laid. Pour vous assurer que vous pouvez suivre chaque étape, je vais simplement continuer à ajouter à ce que nous avons précédemment construit avec des commentaires pour vous aider à voir chaque étape:

Ici, nous voyons que j’ai ajouté dans une couleur de texte qui est essentiellement une teinte plus foncée de la couleur du bouton. Cette astuce est accomplie en fixant la couleur du texte en noir et en réduisant l’opacité via rgba. Ensuite, je centre aligné le texte et de déclarer un tas de choses en utilisant la police sténographe.

Police Shorthand

CSS shorthand est un moyen soigné de déclarer un tas de propriétés et de styles CSS en une seule ligne. Tout d’abord, j’ai déclaré le poids (gras), puis la taille de police / ligne de hauteur et enfin la police-famille. Notez que la hauteur de la ligne est réglée exactement à la hauteur du bouton. Il s’agit d’une façon simple de s’assurer que votre texte est centré verticalement.

Pour plus d’informations sur CSS Shorthand, consultez 6 CSS Shorthand Tricks Every Developer Should Know.

Étape 3 Aperçu

Après la troisième étape de votre bouton devrait effectivement commencer à ressembler à un bouton!

Étape 4: Fancy CSS3 Styles

L’étape précédente nous amène à un joli bouton fonctionnel qui n’a pas l’air à moitié mauvais. Malheureusement, c’est assez ennuyeux. La partie importante est cependant que ce bouton devrait sembler parfait dans la plupart des navigateurs, de sorte que nous pouvons maintenant procéder à ajouter une certaine bonté CSS plus récent sans trop se soucier de laisser les anciens navigateurs derrière. En fin de compte, je n’ai pas vraiment l’esprit si IE décide d’abandonner ces prochains styles parce que mon bouton devrait fonctionner très bien pour ces utilisateurs dans son état actuel.

Nous pouvons facilement nous laisser emporter et écrire cinquante lignes de CSS pour rendre notre bouton brillant et joli, mais je vais le garder très simple pour les fins d’aujourd’hui:

Chacun d’eux peut être difficile à lire alors passons par eux un par un. Tout d’abord, j’ai ajouté un gradient qui utilise la couleur que nous avions déjà en place et s’estompe à quelque chose d’un minuscule par plus sombre. Je suis parti dans ma couleur d’arrière-plan précédente au-dessus de cette section pour agir comme un repli.

Ensuite, il y a le rayon frontalier. J’ai décidé d’aller avec un coin arrondi très lourd qui donnera au bouton une forme de pilule. Comme je veux que tous mes coins soient les mêmes, je déclare simplement une valeur et elle est appliquée uniformément.

Enfin, j’ai jeté dans l’ombre. La boîte et l’ombre de texte que j’ai utilisée sont un peu particulières. Pour l’ombre de la boîte, un lui a donné un décalage vertical, mais pas horizontale et a également laissé la plume à 0. Cela donnera un joli petit effet 3D faux qui ne nécessite pas trop de travail ou de code. Pour l’ombre de texte, j’ai également appliqué un décalage vertical et mis la couleur au blanc à 20% d’opacité. Il s’agit d’un moyen super facile de créer un effet letterpressed et faire apparaître le texte comme s’il s’enfonce dans le bouton.

Utilisez Prefixr pour les préfixes de navigateur

Notez que le code ci-dessus n’est pas compatible cross-browser du tout. Dans les premières étapes de l’expérimentation, je déteste mucking mon code avec une demi-douzaine de préfixes de navigateur et souvent oublier si oui ou non un navigateur donné a une syntaxe unique.

Une fois que j’ai des choses à la recherche de la façon dont je veux dans Espresso (mon IDE de choix) en utilisant la syntaxe de base, je peux lancer tout ce code dans un petit outil gratuit appelé Prefixr, qui va le traiter et cracher mon code avec toutes les versions correctes disponibles navigateur spécifique automatiquement ajouté.

Étape 4 Aperçu

Après la quatrième étape, votre bouton devrait sembler beaucoup plus nette qu’avant. Presque fini!

Étape 5: Hover Styles

La dernière étape de notre processus de bouton est de définir le comportement de vol stationnaire. Lorsque l’utilisateur plane sur le bouton, il est toujours agréable d’obtenir un peu de rétroaction visuelle qui est plus que le changement de curseur par défaut. Encore une fois, nous pourrions aller tout cela avec cela, mais je vais garder les choses simples et juste alléger le gradient un peu:

Maintenant, lorsque vous planez sur le bouton, sa couleur / luminosité va changer. C’est un effet subtil, mais est certainement assez fort pour tout utilisateur de remarquer, même si elles sont daltoniens.

Fini!

Après la cinquième étape, vous avez tous terminé! Vous devriez maintenant avoir un beau bouton créé entièrement avec CSS et HTML. Plus important encore, cependant, vous devriez avoir une forte sensation pour le flux de travail de base à suivre pour concevoir un bouton en utilisant CSS.

Démo : Pour voir le bouton en action, cliquez ici ou sur l’image ci-dessus.
jsFiddle: Pour jouer avec le code, cliquez ici.

Conclusion

Nous avons appris beaucoup de choses très importantes aujourd’hui. Tout d’abord, nous avons vu que nous pouvons utiliser une balise d’ancrage HTML de base comme point de départ pour notre bouton et qu’il est bon de style boutons avec des classes réutilisables. Nous avons également appris à commencer par coiffer un bouton de base qui fonctionnera bien sur tous les navigateurs et à lancer dans le flair supplémentaire plus tard plutôt que de baser l’ensemble de la structure du bouton sur des techniques qui ne seront pas largement accessibles. Enfin, nous avons vu comment garder les choses simples en codant avec les propriétés de base CSS3 jusqu’à ce que nous obtenons tout droit, puis le suivi avec un voyage à Prefixr, qui étend notre code à quelque chose d’aussi compatible cross-browser que possible.

Laissez un commentaire ci-dessous et faites-nous savoir ce que vous en pensez. Si vous êtes un débutant, cela vous a-t-il été utile? Si vous êtes un pro chevronné, que feriez-vous différemment?

par Joshua Johnson