Chez Design Shack, nous proposons une gamme complète de didacticiels, allant des projets experts PHP aux astuces CSS très simples. Le didacticiel d’aujourd’hui est destiné aux débutants de CSS.
Une des questions les plus fréquemment posées par les débutants en CSS est la suivante: "Comment 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. Lorsque j'ai commencé à travailler en CSS, la syntaxe des boutons était l'un des problèmes les plus persistants à laquelle j'ai été confronté. Il me semblait que je me trompais toujours. Aujourd'hui, nous allons suivre un processus très simple et flexible que vous pouvez appliquer à n'importe quel bouton que vous créez. L'explication détaillée de chaque point est plus importante que le résultat final et explique pourquoi nous procédons de cette manière.
Étape 1: le HTML
Croyez-le ou non, c'est l'une des parties les plus difficiles. Pour un codeur expérimenté, cela semble si simple. Pour un débutant, savoir par où commencer avec un bouton peut être assez difficile. Devez-vous utiliser le bouton? Balise HTML? Ou peut-être une balise de paragraphe? Quelles parties le lien doit-il entourer?
Il s'avère que la syntaxe la plus simple et la plus largement utilisée consiste simplement à implémenter une ancienne balise d'ancrage simple (les boutons de formulaire utilisent souvent? Entrée?). D'un point de vue fonctionnel, tout ce que nous essayons réellement de créer est un lien qui, lorsqu'il est cliqué, nous emmène vers un nouveau site, ce qui correspond exactement à ce qu'un lien HTML de base fait. 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é particulière.
Voici un extrait de code HTML largement utilisé qui fait le travail à la perfection tout en restant concis:
Si vous n'avez pas besoin d'une div, n'en utilisez pas
Un problème que je rencontrais quand je commençais à coder était que je pensais souvent que j'avais besoin d'une div pour créer quoi que ce soit. En utilisant cette logique imparfaite, je placerais mon ancre dans une div, puis appliquerais l’essentiel du style à la div.
Ceci est toutefois totalement inutile et peut créer des problèmes à la fois avec le clic et le survol. Dans l'exemple ci-dessus, notre élément entier sera le lien. Si nous intégrions cela dans une div et l'appelions, 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?
La chose la plus importante à noter à propos de cet extrait de code est peut-être que nous avons ajouté une classe, que j'ai génériquement étiquetée? Button. Il y a deux raisons à cela.
Tout d'abord, nous avons besoin d'un moyen de cibler et de styler ce bouton dans notre CSS sans nécessairement cibler toutes les balises d'ancrage de la page. Ce n'est presque jamais le cas que vous souhaitiez que chaque lien soit un bouton identique. Cependant, il est possible et probable que vous souhaitiez en fait réutiliser le style de bouton à un moment donné. Pour cette raison, nous appliquons une classe au lieu d'un ID. De cette façon, chaque fois que nous voulons convertir un lien texte brut en un joli bouton, nous appliquons simplement notre bouton? classe et nous avons terminé!
Étape 1 Aperçu
À ce stade, vous ne devriez avoir qu'un lien de texte brut avec un style par défaut.
Étape 2: Styles de boutons de base
Maintenant que notre code HTML est prêt, il est temps de passer au CSS. Rappelez-vous que nous avons mis en place un bouton? classe dans le but explicite de ciblage CSS, 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 constituera notre forme de bouton. Voici les styles que j'ai utilisés. Notez que mes choix de couleurs et mes dimensions sont complètement facultatifs, n'hésitez pas à utiliser ce que vous voulez.
La chose la plus importante que j'ai faite ici a été de régler? Display? bloquer?. Cela nous permettra de transformer notre lien de texte en une boîte plus grande avec une largeur et une hauteur définies. Après cela, je définis simplement ma taille et ma couleur d'arrière-plan, puis j'ajoute une bordure. Je vais utiliser? Rgba? assez, si vous voulez rendre cela un peu plus convivial pour les navigateurs plus anciens, consultez cet article sur la déclaration des replis de rgba.
Étape 2 Aperçu
Après la deuxième étape, vous devriez avoir une boîte assez ennuyeuse avec du texte impossible à lire à l'intérieur.
Étape 3: Styles de texte
Ensuite, il est temps d’attaquer ce texte laid. Pour être sûr de pouvoir suivre chaque étape, je continuerai simplement à ajouter des commentaires à ce que nous avons précédemment construit pour vous aider à voir chaque étape:
Nous voyons ici que j'ai ajouté une couleur de texte qui est essentiellement une nuance plus foncée de la couleur du bouton. Cette astuce est accomplie en définissant la couleur du texte en noir et en réduisant l'opacité via rgba. Ensuite, je centrai le texte et déclarai un tas de choses en utilisant un raccourci de police.
Police abrégée
Le raccourci CSS est un moyen astucieux de déclarer un ensemble de propriétés et de styles CSS sur une seule ligne. J'ai d'abord déclaré le poids (gras), puis la taille de police / hauteur de ligne et enfin la famille de polices. Notez que la hauteur de ligne est définie exactement à la hauteur du bouton. C'est un moyen simple de vous assurer que votre texte est centré verticalement.
Pour plus d'informations sur CSS Shorthand, consultez les 6 astuces relatives aux raccourcis CSS que chaque développeur devrait connaître.
Étape 3 Aperçu
Après la troisième étape, votre bouton devrait en réalité ressembler à un bouton!
Étape 4: Styles CSS3 fantaisie
L’étape précédente nous amène à un bouton fonctionnel qui n’a pas l’air mauvais. Malheureusement, c'est assez ennuyeux. L’important, c’est que ce bouton ait l’air parfait dans la plupart des navigateurs. Nous pouvons donc maintenant ajouter quelques nouveautés CSS sans nous soucier de ne pas laisser les anciens navigateurs. En fin de compte, peu importe si IE décide d'abandonner ces styles suivants, mon bouton devrait fonctionner correctement pour les 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 besoins d'aujourd'hui:
Chacun de ceux-ci peut être difficile à lire, alors parcourons-les un à un. Tout d'abord, j'ai ajouté un dégradé qui utilise la couleur que nous avions déjà en place et s'estompe en quelque chose de très sombre. J'ai laissé dans la couleur d'arrière-plan précédente au-dessus de cette section pour faire office de solution de secours.
La prochaine étape est le rayon de la frontière. J'ai décidé d'aller avec un coin arrondi très lourd qui donnera au bouton une forme de pilule. Puisque je veux que tous mes coins soient les mêmes, je déclare simplement une valeur et elle est appliquée uniformément.
Finalement, j'ai jeté quelques ombres. La zone et l'ombre de texte que j'ai utilisées sont un peu étranges. Pour l'ombre de la boîte, a lui a donné un décalage vertical mais pas horizontal et a également laissé le dégradé à 0. Cela donnera un joli petit effet 3D factice qui ne nécessite pas trop de travail ou de code. Pour l'ombre du texte, j'ai également appliqué un décalage vertical et défini la couleur sur blanc à 20% d'opacité. C’est un moyen très facile de créer un effet alphabétique et d’afficher le texte comme s’il s’enfonçait dans le bouton.
Utiliser Prefixr pour les préfixes du navigateur
Notez que le code ci-dessus n'est pas compatible avec tous les navigateurs. Au début de l’expérimentation, je déteste bricoler mon code avec une demi-douzaine de préfixes de navigateur et j’oublie souvent si un navigateur donné a une syntaxe unique.
Une fois que les choses se présentent comme prévu dans Espresso (mon IDE de choix) avec la syntaxe de base, je peux lancer tout ce code dans un petit outil gratuit appelé Prefixr, qui le traitera et crachera mon code avec les versions spécifiques au navigateur disponibles correctes ont été automatiquement ajoutées.
Étape 4 Aperçu
Après la quatrième étape, votre bouton devrait paraître beaucoup plus net qu'auparavant. Presque fini!
Étape 5: styles de survol
La dernière étape de notre processus de bouton consiste à définir le comportement de survol. Lorsque l'utilisateur survole le bouton, il est toujours agréable de recevoir un petit retour visuel qui dépasse le changement de curseur par défaut. Encore une fois, nous pourrions tout faire avec cela, mais je vais garder les choses simples et simplement éclaircir un peu la pente:
Maintenant, lorsque vous passez la souris sur le bouton, sa couleur / luminosité change. C'est un effet subtil, mais suffisamment puissant pour que tout utilisateur le remarque, même s'il est daltonien.
Fini!
Après la cinquième étape, vous avez terminé! Vous devriez maintenant avoir un beau bouton créé entièrement avec CSS et HTML. Plus important encore, vous devez avoir une bonne idée du flux de travail de base à suivre pour créer un bouton à l'aide de CSS.
Démo: Pour voir le bouton en action, cliquez ici ou sur l'image ci-dessus.
jsFiddle: Pour violer 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 de notre bouton et qu'il est bon de styliser des boutons avec des classes réutilisables. Nous avons également appris à créer un bouton de base qui conviendra à tous les navigateurs et à ajouter plus de style plus tard au lieu de baser toute la structure du bouton sur des techniques qui ne seront pas largement accessibles. Enfin, nous avons vu comment simplifier les choses en codant avec les propriétés de base de CSS3 jusqu'à ce que tout soit parfait, puis en effectuant un voyage dans Prefixr, qui étend notre code à une compatibilité compatible avec tous les navigateurs.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez. Si vous êtes débutant, cela vous a-t-il aidé? Si vous êtes un professionnel expérimenté, que feriez-vous différemment?