Bouton Tutoriel CSS Comment coder les boutons en 5 étapes simples, Design Shack
Bouton CSS Tutoriel: Comment le code des boutons en 5 étapes simples
Ici, à la conception Shack nous aimons en vedette une gamme complète de tutoriels, des projets PHP experts à très simples conseils de CSS. Le tutoriel d'aujourd'hui est destiné à ceux qui sont encore au stade de débutant de CSS.
L'une des questions les plus fréquentes que je reçois de débutants CSS est, « Comment puis-je créer un bouton? » Il est une question simple avec une réponse compliquée. Il y a assez peu de façons de s'y prendre et, malheureusement, il y a aussi tout à fait quelques façons d'aller mal. Quand j'ai commencé en CSS, calculer toute la syntaxe du bouton a été l'un des problèmes les plus persistants que je face, il semblait que je faisais toujours mal. Aujourd'hui, nous allons marcher à travers un processus très simple et flexible que vous pouvez appliquer à tout bouton que vous créez. Plus important que le résultat final est l'explication en profondeur à chaque point décrivant pourquoi nous le faisons de cette façon.
Étape 1: Le code 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 si, sachant où commencer avec un bouton peut être assez difficile. Si vous utilisez la balise HTML « bouton »? Ou peut-être une étiquette de paragraphe? Quelles parties le lien doit enrouler autour?
Il se trouve que la syntaxe la plus simple et la plus utilisée est juste pour mettre en œuvre une étiquette ancienne ancre ordinaire (boutons de formulaire utilisent souvent « entrée »). D'un point de vue fonctionnel, tout ce que nous essayons vraiment de créer un lien qui, lorsque vous cliquez dessus, nous emmène dans un nouvel endroit, ce qui est exactement ce qu'un lien HTML de base fait. Souvent, dans la conception web, le choix de transformer quelque chose en un bouton est simplement une esthétique et ne signifie pas nécessairement une fonctionnalité particulière.
Voici un extrait largement utilisé de HTML qui fait le travail parfaitement, tout en restant agréable et succinct:
Si vous n'avez pas besoin d'une division, Ne pas utiliser un
Un problème que je l'habitude de venir à travers quand je commencé à coder est que je pense souvent que je avais besoin d'un div pour créer quoi que ce soit. En utilisant cette logique erronée, j'envelopper mon ancre dans un div et appliquer ensuite la plupart du style à la div.
Ceci est tout à fait inutile et que peut créer des problèmes à la fois le clic et le vol stationnaire. Dans l'exemple ci-dessus, notre élément entier sera le lien. Si nous enveloppa cela dans un div et que Styled, seule la partie de 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 sur ce bout de code est que nous avons ajouté une classe, que j'ai génériquement Labellisé « bouton. » Il y a deux raisons à cela.
Tout d'abord, nous avons besoin d'un moyen de cibler le style et ce bouton dans notre CSS sans cibler nécessairement toutes les balises d'ancrage sur la page. Il est presque jamais le cas que vous voulez chaque lien pour être un bouton identique. Cependant, il est possible et tout à fait probable que vous en fait de réutiliser le style de bouton à un moment donné. Pour cette raison, nous appliquons une classe au lieu d'une carte d'identité. De cette façon, chaque fois que nous voulons convertir un lien de texte brut à un joli bouton, on applique simplement notre classe « bouton » et nous avons fini!
Étape 1 Aperçu
A ce stade, vous devriez avoir un lien de texte brut avec un style par défaut.
Étape 2: Bouton Styles
Maintenant que nous avons notre HTML tout prêt à aller, il est temps de sauter par-dessus le CSS. Rappelez-vous que nous avons mis en place dans le but exprès de CSS cible alors assurez-vous de l'utiliser pour cette étape une classe « bouton »:
Étape 2 Aperçu
Après la deuxième étape, vous devriez avoir une boîte à la recherche assez ennuyeux avec un peu impossible de lire le texte à l'intérieur.
Étape 3: Styles de texte
Font sténographie
Étape 3 Aperçu
Après trois étapes de votre bouton doit effectivement commencer à ressembler à un bouton!
Étape 4: Fantaisie CSS3 Styles
On peut facilement se laisser emporter et écrire cinquante lignes de CSS pour rendre notre bouton brillante et jolie, mais je vais le garder très simple pour les besoins d'aujourd'hui:
Chacun d'eux peut être difficile à lire si nous allons passer par un par un. Tout d'abord, j'ai ajouté un gradient qui utilise la couleur que nous avions déjà en place et se fane à quelque chose d'un petit par plus sombre. Je suis parti dans ma couleur de fond précédent au-dessus de cet article pour agir comme solution de repli.
Enfin, j'ai jeté dans quelques ombres. Tant la boîte et l'ombre de texte que je sont un peu particulière. Pour l'ombre de la boîte, a donné un décalage vertical, mais pas un horizontal et aussi quitté l'aminci à 0. Cela donnera un joli petit effet 3D faux qui ne nécessite pas trop de travail ou un code. Pour l'ombre du texte, j'ai appliqué aussi un décalage vertical et définissez la couleur au blanc à 20% d'opacité. Ceci est un moyen très facile de créer un effet letterpressed et faire apparaître le texte comme si elle enfonce dans le bouton.
Utilisez Prefixr pour le navigateur Prefixes
Notez que le code ci-dessus ne sont pas multi-navigateur compatible du tout. Dans les premières étapes de l'expérimentation, je déteste déblayage mon code avec une demi-douzaine de préfixes navigateur et oublient souvent si oui ou non un navigateur donné une syntaxe unique.
Une fois que j'ai des choses à la recherche de la façon dont je veux 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 traitera et cracher mon code avec toutes les versions spécifiques du navigateur disponibles corriger automatiquement ajoutés.
Maintenant, lorsque vous passez la souris sur le bouton, sa couleur / luminosité se déplacera. Il est un effet subtil mais est certainement assez fort pour tout utilisateur de remarquer, même si elles sont daltoniens.
Après cinq étapes, vous avez terminé! Vous devriez maintenant avoir un bouton belle créé entièrement avec CSS et HTML. Plus important encore, vous devriez avoir une forte sensation pour le flux de travail de base à suivre pour élaborer un bouton en utilisant le 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 de notre bouton et qu'il est bon de boutons de style avec des classes réutilisables. Nous avons aussi appris comment commencer par le style un bouton de base qui fonctionne bien dans tous les navigateurs et de jeter dans flair plus tard plutôt que de baser toute la structure du bouton sur les techniques qui ne seront pas largement accessibles. Enfin, nous avons vu comment garder les choses simples en codant avec des propriétés CSS3 de base jusqu'à ce que nous obtenons tout juste, puis suivre cela avec un voyage à Prefixr. qui élargit notre code à quelque chose comme multi-navigateur compatible que possible.