Un bouton est l'un des éléments les plus utilisés sur les pages Web. La balise <button></button>peut être utilisée pour démarrer un processus comme la sortie de données, l'ouverture d'une fenêtre modale, la soumission d'un formulaire, etc. Dans le matériel, dont nous publions la traduction, nous parlerons des subtilités du style de l'élément buttonet de la façon de concevoir les boutons afin qu'ils fonctionnent bien dans tous les navigateurs. De plus, les styles de boutons les plus couramment utilisés seront abordés ici. Nous parlerons ici de certaines des difficultés qui se posent lorsque vous travaillez avec des boutons.
Styles appliqués aux boutons par défaut
Peut-être que parler de «styles standard» semblera à quelqu'un être une discussion de certaines choses élémentaires, mais, en fait, en parler est très intéressant. Voici la feuille de style standard pour les boutons de l'agent utilisateur Google Chrome..c-button {
-webkit-writing-mode: horizontal-tb !important;
-webkit-appearance: button;
border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
border-style: solid;
border-width: 1px;
padding: 1px 7px 2px;
text-rendering: auto;
color: initial;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
Et voici à quoi ressemble un bouton standard dont la sortie ne modifie pas les styles par défaut.Un simple bouton auquel les styles standard sont appliqués.Tout d'abord, redéfinissez la propriétéappearance. Il est utilisé pour un style spécifique à une plate-forme particulière. L'apparence du bouton avec cette approche est basée sur les styles utilisés dans le système d'exploitation de l'utilisateur..c-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Maintenant, après avoir réinitialisé la propriété appearance, regardez à quoi ressemblent les boutons dans différents navigateurs.La propriété d'apparence de ces boutons est définie sur aucune.Ensuite, avant de passer au style, nous devons réinitialiser d'autres propriétés. Ce -border,border-radius,background..c-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-radius: 0;
background: #ccc;
}
Bouton après réinitialisation des propriétésMaintenant que nous avons réinitialisé les styles de bouton standard, il est temps de passer à autre chose. À savoir, je veux parler de la façon de styliser les boutons en fonction des exigences de leur conception.Styling des boutons réguliers
Commençons par un exemple de base, en parlant de styliser des boutons normaux qui affichent uniquement du texte. La figure suivante montre «l'anatomie» d'un bouton standard.Couleur du texte (Couleur du texte), taille de la police (Taille de la police), arrière-plan (Arrière-plan), coins arrondis (Arrondi), retrait (Remplissage).c-button {
appearance: none;
border: 0;
border-radius: 5px;
background: #4676D7;
color: #fff;
padding: 8px 16px;
font-size: 16px;
}
Ayant le code CSS ci-dessus, nous pouvons obtenir un bouton similaire à celui montré dans la figure précédente. Une fois le style de base du bouton défini, vous devez prendre soin de l'apparence du bouton dans différents états.État normal du bouton (Normal), obtenir la mise au point (Focus), passer la souris sur le bouton (Hover), désactiver le bouton (Disabled)TyStyles appliqués aux boutons lorsque vous les survolez et lorsqu'ils se concentrent
Afin d'indiquer à l'utilisateur que le pointeur de la souris se trouve sur le bouton, il est important d'équiper le bouton d'un style conçu pour cet événement. La même chose s'applique à la modification de l'apparence d'un bouton lorsqu'il reçoit le focus dans une situation où un utilisateur utilisant un clavier travaille avec une page.Ce matériau indique qu'il est important d'ajouter des styles appliqués au bouton lorsque vous le survolez ( hover) et lorsqu'il reçoit le focus ( focus).Lorsqu'un style est hoverajouté avant un style focus, tous les styles fonctionnent correctement. Le problème apparaît lorsque le style est focusajouté avant le style hover. Lorsqu'un élément est cliqué avec une souris, le style focusne se manifeste en aucune façon; seule la représentation du bouton déterminée par le style est visible hover.Eh bien, si vient d'abord le style de survol, puis le style de mise au point.Voici à quoi ressemble la bonne description du style:.c-button:hover {
background: #1d49aa;
}
.c-button:focus {
outline: none;
box-shadow: 0 0 0 4px #cbd6ee;
}
Width Largeur minimale des boutons
Pour que le bouton soit beau, il doit avoir une certaine largeur. Il est important d'y penser à l'avance et de prendre en compte les étiquettes longues et courtes qui peuvent apparaître sur les boutons. En raison de la propriété, min-widthvous pouvez définir la largeur minimale du bouton. Voici mon article où cette propriété et d'autres propriétés similaires sont discutées en détail.Jetez un œil à la figure suivante. Là, vous pouvez voir plusieurs boutons contenant des étiquettes de différentes longueurs en anglais et en arabe. Si vous ne définissez pas la largeur minimale du bouton, le bouton, lorsque l'inscription est courte, sera trop petit. Il vaut mieux ne pas autoriser cela et utiliser la propriété min-width.Il vaut la peine de définir la propriété du bouton min-width.c-button {
min-width: 100px;
}
▍ Retrait
Une idée peut sembler attrayante, les boutons n'ayant pas de retrait horizontal. Après tout, les boutons ont une certaine largeur, ce qui signifie qu'il y aura suffisamment d'espace entre les bords des boutons et les inscriptions qu'ils contiennent. Donc? Non pas comme ça. La mise en œuvre de cette idée peut avoir des conséquences négatives dans les cas où l'inscription sur le bouton change.Jetez un œil à la figure suivante.Il est recommandé d'attribuer des retraits internes aux boutons.Notez que si l'indentation n'est pas affectée au bouton, l'inscription qui s'y trouve peut s'approcher très près des bords. Même si le bouton a une propriétémin-width. Au bas de l'image, la propriétépaddinget la propriété sont utiliséesmin-width. Cela donne plus de confiance que le bouton sera bon dans une situation où la longueur de l'inscription qui y est affichée n'est pas connue à l'avance.FamilyFont famille utilisée pour les inscriptions situées sur les boutons
Les éléments de formulaire, par défaut, n'héritent pas de la famille de polices affectée à <html>ou <body>. Il est intéressant de noter que j'ai écrit 70% de cet article et réalisé que, premièrement, je n'ai pas changé la police du bouton utilisé à des fins de démonstration, et deuxièmement, je n'ai rien écrit à ce sujet.Pour résoudre ce problème, la propriété font-familydoit être définie sur inherit..c-button {
font-family: inherit;
}
▍ Styliser les boutons désactivés
Afin d'indiquer à l'utilisateur que le bouton est désactivé, vous pouvez lui ajouter un attribut disabledet styliser le bouton à l'aide de CSS.Voici le code HTML qui décrit le bouton désactivé:<button disabled></button>
Voici le code CSS pour styliser un tel bouton:.c-button[disabled] {
color: #d2d5db;
background: #6c7589;
cursor: not-allowed;
}
Lorsque le bouton est désactivé, il ne peut pas obtenir le focus du clavier et est supprimé de l'arborescence d'accessibilité des éléments de page.ViewVue extérieure du curseur de la souris lorsque vous le survolez avec le bouton
Le pointeur de souris standard sur le bouton ressemble à une flèche. J'aime cette réponse sur StackOverflow: «Les boutons sont un contrôle de bureau traditionnel. Il s'agit d'un environnement dans lequel un pointeur à main n'a jamais été utilisé jusqu'à l'avènement de l'ère Internet. Lorsque le même contrôle a commencé à être utilisé sur les pages Web, les développeurs ont simplement essayé de donner aux boutons la même apparence que dans les applications de bureau. »Afin de redéfinir le comportement habituel du pointeur, il est recommandé de changer la flèche de curseur standard en un curseur en forme de main.Curseur à flèche standard et curseur à main amélioré.Maintenant que nous avons discuté des problèmes de base du style des boutons, voici le code CSS complet qui comprend tout ce que nous avons abordé ci-dessus:.c-button {
min-width: 100px;
font-family: inherit;
appearance: none;
border: 0;
border-radius: 5px;
background: #4676d7;
color: #fff;
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
.c-button:hover {
background: #1d49aa;
}
.c-button:focus {
outline: none;
box-shadow: 0 0 0 4px #cbd6ee;
}
Dans les sections suivantes, nous parlerons des différents styles et types de boutons que vous pouvez utiliser dans vos projets.Boutons d'icônes
Parfois, vous avez besoin d'un bouton pour avoir une certaine icône. Cela peut être nécessaire pour mettre le bouton en surbrillance ou pour mieux informer l'utilisateur du rôle du bouton. Il est important que les boutons d'icônes soient accessibles aux utilisateurs handicapés.Exemples deboutons d'icônes Dans l'image précédente, il y a des boutons d'icônes. Le code ci-dessous montre l'attribut ajouté à l'icônearia-hidden, ce qui vous permet de le supprimer de l'arborescence d'accessibilité. J'ai également ajouté un attributfocusable="false"pour empêcher l'icône de se concentrer dans IE.Veuillez noter que j'ai utilisé le stylevertical-align: middlepour aligner verticalement le contenu des icônes et des boutons.Voici le code HTML du bouton en question:<button class="c-button">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"></svg>
Add to fav
</button>
Voici le code de style:.c-button svg {
display: inline-block;
vertical-align: middle;
fill: #fff;
width: 20px;
height: 20px;
margin-right: 0.25rem;
}
Ce que nous venons d'examiner peut fonctionner jusqu'à ce que nous décidions de masquer le texte du bouton et d'en faire le bouton sur lequel seule l'icône est située. Comment faire? Vous devez d'abord envelopper le texte, par exemple, dans un élément span. Ensuite, vous pouvez améliorer encore l'apparence du bouton. Voici la description HTML du bouton:<button class="c-button c-button--icon">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"></svg>
<span>Add to fav</span>
</button>
Il peut sembler que maintenant il suffit de cacher l'élément spanet le travail sera fait:.c-button--icon span {
display: none;
}
Bien qu'avec cette approche, le texte disparaisse et l'icône reste, c'est très mauvais en termes d'accessibilité du contenu. Le bouton n'est plus «visible» pour les lecteurs d'écran. Par exemple, VoiceOver sur macOS signale qu'un tel bouton est simplement un «bouton», sans aucun détail à ce sujet. Il existe plusieurs solutions à ce problème.▍Utilisation d'icônes SVG
Je préfère utiliser les icônes SVG. Il est recommandé de rassembler toutes les descriptions SVG des éléments graphiques dans un fichier et d'inclure chaque icône dans la balise <svg>utilisant l'élément <use>. Voici un exemple:<svg class="c-icon" width="32" height="32" viewBox="0 0 20 20">
<use xlink:href="icons.svg#facebook"></use>
</svg>
Voici le code de l'icône SVG, dont la description est stockée dans un fichier icons.svget possède un identifiant #facebook. Cette approche réduit la duplication de code.ButtonBouton de taille avec icône
Étant donné que le texte du bouton n'est plus visible et que la propriété CSS est définie pour le bouton min-width, la largeur du bouton ne correspondra pas à la taille de l'icône. Afin de prendre en compte cette fonctionnalité, il est préférable de définir explicitement la largeur du bouton icône.Un bouton qui a le jeu de propriétés CSS min-width et un bouton qui n'a pas ce jeu de propriétés.c-button--icon {
min-width: initial;
text-align: center;
padding: 10px 14px;
}
▍Visuel caché du texte
Un élément, utilisant la classe populaire .sr-only, peut être masqué visuellement en le supprimant de l'écran, mais en le laissant accessible aux lecteurs d'écran.Voici le code HTML:<button class="c-button c-button--icon">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"></svg>
<span class="sr-only">Add to fav</span>
</button>
Voici les styles:.sr-only {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
▍ Réglez la taille de la police sur 0
Si vous définissez la propriété font-sizesur une valeur 0, l'élément spann'occupera aucun espace d'écran. Autrement dit, il sera caché..c-button--icon span {
font-size: 0;
}
Mais ici, je suis enclin à une solution impliquant l'utilisation d'une classe .sr-only. De mon point de vue, cela semble plus logique. La méthode de masquage du texte en définissant la taille de la police sur 0, il me semble, ressemble à une sorte de hack.▍Utilisation de l'attribut aria-label
S'il n'y a aucun élément dans le bouton <span>, il doit y avoir un moyen de s'en passer. Une telle façon consiste à utiliser un attribut aria-label. L'attribut est soit attribué à l'élément lui <button>- même , soit à l'élément <svg>.<button class="c-button c-button--icon" aria-label="Add to fav">
<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24"></svg>
</button>
Si vous voulez en savoir plus sur les boutons avec des icônes - jetez un œil à ce matériel.Boutons contenant plusieurs lignes de texte
Dans certains cas, il peut être nécessaire que le bouton contienne deux lignes de texte. Un exemple d'un tel bouton est illustré ci-dessous.Bouton contenant deux lignes de texteVoici un bouton pour un formulaire d'abonnement qui contient le texte principal et auxiliaire. Comment réaliser un tel bouton et en même temps ne pas oublier son accessibilité pour les personnes handicapées? Voici le HTML pertinent:<button class="c-button">
<span>Subscribe to our newsletter</span>
<span>240K+ subscribers</span>
</button>
Le lecteur d'écran "prononcera" ce bouton comme "Abonnez-vous à notre newsletter 240K + abonnés". Lorsque l'utilisateur l'entend, cela peut le dérouter, car rien ne séparera les deux lignes de texte affichées sur le bouton. Jetez un œil à la capture d'écran de l'outil Chrome pour examiner la disponibilité des éléments.Explorer la disponibilité des éléments dans ChromeAfin de ne pas dérouter les utilisateurs, je préférerais cacher la deuxième ligne de texte aux lecteurs d'écran. Vous pouvez le faire en utilisant l'attributaria-hiddendans l'élément correspondant<span>:<button class="c-button">
<span>Subscribe to our newsletter</span>
<span aria-hidden="true">240K+ subscribers</span>
</button>
Si, pour une raison quelconque, vous ne pouvez pas modifier le balisage HTML, il existe un autre moyen d'ajouter du texte supplémentaire au bouton. J'ai trouvé une solution intéressante à ce problème sur le site Web de Smashing Magazine. Elle consiste à placer du contenu à l'aide de pseudo-éléments. Avec cette approche, les lecteurs d'écran ne verront rien de superflu. Voici le CSS de cette solution:.c-button--multiple span:after {
content: "240K+ subscribers";
display: block;
font-weight: 400;
margin-top: 0.25rem;
}
Liens (<a>) ou boutons (<bouton>)?
Quand utiliser les liens et quand - à l'aide des boutons? Pour commencer, parlons de la façon dont ils diffèrent les uns des autres.▍Liens
La balise <a>est un lien hypertexte qui vous permet d'accéder à une autre page du site Web ou d'accéder à une section spécifique de la page consultée par l'utilisateur. Ensemble avec l'étiquette <a>, vous pouvez utiliser les quatre pseudo-: :hover, :focus, :activeet :visited. Si nous considérons les liens du point de vue de l'accessibilité, nous devons dire que vous pouvez interagir avec eux à l'aide de la touche Enterdu clavier. Les liens sont exprimés et des lecteurs d'écran.▍Boutons
Un élément <button type="button">en lui-même, sans y connecter de code JavaScript, n'effectue aucune action. Vous pouvez utiliser des pseudo-classes avec lui :hover, :focuset :active. Si nous parlons d'accessibilité, vous pouvez interagir avec le bouton à l'aide des touches du clavier Enteret .c-buttondoit être écrit afin qu'il puisse être utilisé à la fois pour les éléments <button>et les éléments <a>. Prenons l'exemple suivant.Utilisation de liens et de boutonsNotez que les «boutons» de la page sont de la même manière. Cependant, le premier d'entre eux est, en fait, un élément<a>, et le second est un élément<button>. Cela signifie que le bouton ne ressemble pas nécessairement à un élément en HTML<button>.Il y a deux ajouts au style.c-button. Ce sont les propriétéstext-decoration: none;ettext-align: center;. Par défaut, le texte des liens est souligné, nous voulons donc changer cela en stylisant la classe utilisée. De plus, il est important pour nous de centrer le contenu du bouton dans les cas où un élément HTML autre que celui utilisé pour décrire le bouton<button>..c-button {
text-decoration: none;
text-align: center;
}
▍ L'élément <button> ne doit pas ressembler à un bouton
J'aime cet exemple, dans lequel, compte tenu des exigences d'accessibilité du contenu, le panel «accordéon» est implémenté. Initialement, en supposant que JavaScript n'est pas disponible, le résultat du rendu du balisage ressemble à celui ci-dessous.Matériaux de pagelorsque JavaScript n'est pas disponible Voici le code HTML d'un fragment d'un tel balisage:<div class="accordion" data-aria-accordion>
<h2 data-aria-accordion-heading>Heading of my panel</font></h2>
<div data-aria-accordion-panel>
<p>Content goes here</p>
</div>
</div>
Si JavaScript est disponible, le balisage ci-dessus décrira les éléments qui peuvent être réduits et développés. Pour ce faire, créez un bouton et ajoutez-le à l'élément <h2>.Page matériaux dans des conditions où la fonctionnalité JavaScript est disponibleDans ce cas, nous pouvons dire que l'utilisation de l'élément<button>est le bon choix, car le bouton résout le problème de l'expansion et de la réduction des blocs de texte.▍Boot button
Supposons que nous ayons un document. Nous devons décrire un lien pour le télécharger. Quel élément doit être utilisé pour résoudre ce problème? Ici un lien viendra à notre aide! Si vous ajoutez un attribut au lien download, cliquez dessus pour lancer le téléchargement des documents pertinents.Lien pour télécharger le document, conçu comme un boutonVoici le code de ce lien:<a href="rtl-101.pdf" download>Download PDF</a>
Avec cette approche, nous avons à notre disposition un lien, stylisé comme un bouton, qui fait son travail en utilisant uniquement des structures HTML sémantiques.Boutons de course
Un bouton normal lorsque vous passez la souris dessus devient un bouton avec un trait.La figure précédente montre un bouton qui devient un bouton avec un trait lorsque vous le survolez. Quelle méthode est la mieux utilisée pour implémenter un changement similaire dans l'apparence d'un bouton? Pour commencer, le style du bouton doit inclure une propriétéborderqui, par défaut, utilise une couleur transparente. En fournissant une telle propriété, nous nous assurons que les bordures du bouton, lorsque vous passez la souris dessus, ne soient pas redessinées..c-button {
border: 2px solid transparent;
}
.c-button:hover {
background: transparent;
color: #222;
border-color: #4676d7;
}
Grâce à cette approche, nous avons à notre disposition un bouton autour duquel, lorsque vous passez la souris dessus, ses bordures s'affichent. Dans ce cas, l'arrière-plan du bouton devient transparent.Boutons dégradés
Lorsque je travaillais sur un article sur le positionnement des éléments, j'avais besoin d'un bouton avec un remplissage dégradé.J'avais besoin de quelque chose de similaire à la figure suivante.Bouton dégradé et sa variante avec un traitIl existe deux options pour un bouton - un bouton dégradé et un bouton avec un trait. Afin d'obtenir une telle apparence du bouton, j'avais besoin que le bouton de base (dégradé) ait une bordure transparente. Cette bordure ne sera affichée que pour un bouton avec un trait..c-button {
display: inline-block;
color: #fff;
background: linear-gradient(to bottom, #00acee, #0072e0);
font-size: 18px;
font-weight: 500;
padding: 12px 26px;
border-radius: 100px;
border: 3px solid transparent;
text-decoration: none;
}
.c-button--outline {
background: transparent;
color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
}
Tout semble raisonnable ici, mais au cours du travail, je suis tombé sur un étrange problème. J'ai même essayé de le résoudre en demandant de l' aide aux utilisateurs de Twitter. Ce problème est présenté dans la figure suivante.Un bouton standard, un bouton avec un dégradé (la bordure est en fait transparente; elle est affichée uniquement à des fins de couleur), un bouton avec des bords étrangesMaintenant que nous avons compris à quoi ressemble un bouton dégradé avec une bordure transparente, permettez-moi de vous expliquer les raisons des bizarreries ci-dessus. .Chaque élément a une propriétébackground-originqui définit la zone de positionnement du papier peint, qui est définie sur la valeur par défautpadding-box. Avec cette approche, la taille du dégradé est sélectionnée pour correspondre à la taille de l'élément, en tenant compte de l'épaisseur de la bordure.J'ai essayé d'ajouter une large bordure au bouton afin d'observer ce qui se passe. Remarquez comment le dégradé se répète et que sa taille correspond à la propriété dupaddingbouton.Bouton avec de larges bordures et un dégradé.Pour résoudre ce problème, la zone de positionnement de l'image d'arrière-plan doit être définie à l'aide du stylebackground-origin: border-box;, en changeant la valeur par défautpadding-boxenborder-box:.c-button {
background-origin: border-box;
}
Maintenant , si vous voulez expérimenter, un exemple sur CodePen.Quel est le meilleur - hauteur ou rembourrage?
Chaque bouton a une hauteur. Vous pouvez contrôler la hauteur d'un bouton en définissant explicitement sa propriété heightou en définissant une propriété paddingpour les côtés supérieur et inférieur du bouton. Veuillez noter que les problèmes que nous aborderons ci-dessous sont typiques principalement pour les éléments <a>.▍ Hauteur fixe
Supposons que nous ayons un bouton stylisé comme suit:.c-button {
min-width: 120px;
height: 45px;
}
Avec cette approche, le texte n'est pas centré. Tout ressemble à celui ci-dessous.Bouton, dont le texte n'est pas aligné au centrePour corriger cela et aligner le texte, vous pouvez soit utiliser la propriétépadding, soit la propriétéline-height. En le définissantline-heightsur une valeur égale ou proche de la hauteur du bouton, nous pouvons aligner le texte au centre..c-button {
min-width: 120px;
height: 45px;
line-height: 45px;
}
Mais cette méthode présente des inconvénients:- Il n'est pas garanti que le texte du bouton soit toujours correctement centré. Si vous changez la police, son alignement peut être rompu.
- Lorsque vous augmentez la valeur spécifiée par la propriété
font-size, vous devez sélectionner une nouvelle valeur pour la propriété line-height. - La propriété
line-height peut fonctionner différemment pour les textes affichés dans différentes langues. Cela est vrai pour les sites multilingues. - S'il existe un bouton avec deux lignes de texte, cette méthode ne convient pas pour aligner le contenu du bouton.
▍ Retrait vertical
Si vous définissez les mêmes valeurs pour les propriétés padding-topet padding-bottom, attendez-vous à ce que le contenu du bouton soit centré. C'est comme ça? En fait, cela dépend de la situation spécifique.Il y a des polices qui se centrent très bien. Et il y a ceux qui se comportent différemment. Parfois, pour atteindre l'objectif, l'une des valeurs de l'indentation verticale doit être légèrement modifiée. Jetez un œil au bouton suivant.Tentative de centrer le texte du boutonVoici le code CSS pour styliser ce bouton:.c-button {
min-width: 120px;
padding: 16px 14px;
}
Dans ce cas, le contenu du bouton semble légèrement biaisé. La valeur du retrait supérieur doit être légèrement réduite:.c-button {
min-width: 120px;
padding: 14px 14px 16px 14px;
}
Envelopper le contenu du bouton dans une balise <span>
Au cours des expériences, j'ai découvert que l'alignement du texte des boutons Adobe était un peu renversé. Voici à quoi ça ressemble.Centré un peu renversé,j'ai examiné ces boutons et j'ai remarqué un motif intéressant. Le contenu est enveloppé dans un élément<span>indiquant une hauteur fixe pour le bouton.<button class="c-button-adobe">
<span>Save Changes</span>
</button>
Pour un <button>élément <span>, l' élément , par défaut, est centré. Lorsque la hauteur change, le contenu est centré automatiquement, sans avoir besoin d'une propriété paddingou de quoi que ce soit d'autre. Voici une démonstration animée de ce comportement.Changer la hauteur d'un bouton et centrer automatiquement son contenuVrai, si nous parlons d'un lien qui ressemble à un bouton, alors l'élément<span>doit être centré. Afin de prendre en compte cette fonctionnalité, on peut utiliser la méthode de disposition des élémentsflexbox..c-button {
display: inline-flex; *To keep the button inline, and flex container at the same time*
align-items: center;
justify-content: center;
}
C'est tout. Je veux noter que cet article m'a aidé lors de la rédaction de cette section .Boutons à l'intérieur des conteneurs flexbox ou grid
Ici, vous pouvez avoir une question sur ce que les boutons ont à voir avec les dispositions de flexion et de grille. Permettez-moi de clarifier cette question.J'ai travaillé sur une section d'un projet. J'avais besoin de centrer verticalement son contenu. J'ai donc utilisé la disposition flexible:.c-hero {
display: flex;
flex-direction: column;
justify-content: center;
}
Ce que j'ai fait était un peu surprenant.Résultat de l'utilisation de la disposition flexiblePar défaut, chaque élément flexible est étiré dans la largeur de l'élément parent. C'est exactement ce qui s'est produit avec le bouton illustré dans la figure précédente. Afin d'éviter ce problème, vous devez configurer la propriétéalign-self:.c-button {
align-self: flex-start;
}
Voici comment le bouton s'en occupera.Le bouton semble beaucoup mieux.Un autre problème courant se produit lorsque le bouton est placé dans un conteneur flexible, dans lequel, par défaut, la propriété est définieflex-direction: row. La hauteur du bouton sera ajustée à la hauteur de l'élément parent. Pour résoudre ce problème, vous devez utiliser laalign-selfpropriétébuttonou la propriété flex containeralign-items.Bouton tendu en hauteurVoici le CSS:.c-button {
align-self: center;
}
En réglant l'alignement du bouton par rapport au centre du conteneur, nous résolvons le problème. Voici à quoi ressemblera le même exemple.Résoudre le problème d'un bouton étiréUtilisation d'unités em
L'unité de mesure empeut être utilisée pour configurer correctement les tailles de bouton. Cette unité de mesure est très utile dans une telle situation. L'unité emest égale à l' font-sizeélément ( pxou rem). Jetez un œil à l'exemple suivant:.element {
font-size: 16px;
padding: 0.5em;
}
Dans ce cas, la valeur de remplissage est égale 16 * 0.5 px.Supposons que le projet utilise des boutons de trois tailles: standard, moyen et grand. Quand spécifier des valeurs padding, width, height, marginunités de mesure utilisées em, il vous permet de créer un bouton, dont les dimensions est très facile de changer. Voici à quoi ça ressemble.Boutons de différentes taillesMais voici les fragments de code CSS qui utilisent l'unité de mesureem:.c-button {
font-size: 1rem;
min-width: 6.25em;
border-radius: 0.3125em;
padding: 0.625em 1em;
}
.c-button svg {
width: 1.25em;
height: 1.25em;
margin-right: 0.25em;
}
Pour les boutons de différents types, vous devez créer des classes qui spécifient différentes tailles de police:.c-button--md {
font-size: 22px;
}
.c-button--lg {
font-size: 30px;
}
→ Voici un exemple d'utilisation de boutons similaires sur CodePen→ Voici mon article sur ce sujet. Je vous recommande de le lireAnimation et transitions
Afin de rendre plus agréable pour l'utilisateur de travailler avec la page, il est important de penser à utiliser une transition lorsque vous survolez le bouton. La façon la plus simple de procéder consiste à organiser un changement de couleur d'arrière-plan. Voici un exemple sur CodePen où vous pouvez voir la mise en œuvre de cette idée.Sommaire
J'ai été très heureux de travailler sur ce matériau. Il m'a fallu plus d'un an pour l'écrire. Je suis heureux qu'il soit enfin publié. J'espère que vous trouverez ici quelque chose qui vous sera utile.Chers lecteurs! Connaissez-vous des moyens utiles de travailler avec des boutons qui sortent du cadre de cet article?