Une introduction aux bases des boutons CSS modernes

Conception de bouton de la page Web: Trois styles et implémentation CSS

Cet article a été mis à jour le 9 juillet 2016 et a remplacé la balise <a></a> par la balise <button></button> pour se conformer aux meilleures pratiques d'accessibilité moderne. Si vous travaillez sur des boutons, restez toujours à la balise <button></button>.

Les boutons

sont l'un des composants les plus importants de n'importe quelle page Web, et ils ont de nombreux états et fonctions différents, qui doivent tous être égalés correctement avec les décisions de conception précédentes. Dans cet article, nous présenterons trois concepts de conception de bouton, ainsi que le code CSS et les outils pour aider les nouveaux développeurs à créer leurs propres boutons.

Avant de plonger dans divers concepts de conception de bouton, nous devons passer en revue certaines connaissances de base des boutons CSS. Si vous ne savez pas quels composants CSS changent, cela n'a aucun sens de comprendre la différence de réflexion entre l'interface utilisateur aplati et la conception des matériaux.

passons rapidement en revue les bases des boutons CSS.

Points clés

• L'utilisation de balises <button></button> est un moyen recommandé de gérer les boutons dans les meilleures pratiques d'accessibilité moderne.
• Une bonne conception de bouton devrait garantir l'accessibilité, le bouton doit être facilement accessible aux personnes handicapées et aux utilisateurs utilisant des navigateurs plus anciens et doit contenir du texte simple afin que l'utilisateur puisse immédiatement comprendre l'objectif du bouton.
Les trois principaux éléments de base de la conception de bouton
• sont les couleurs, les ombres et le temps de transition, qui peuvent être utilisés à l'aide de pseudo-classes CSS telles que :hover et :active.
• Cet article fournit des exemples de trois styles de bouton: boutons simples en noir et blanc, boutons d'interface utilisateur plats et boutons de conception de matériaux, chacun avec sa propre méthode de conception unique.
• Pour créer votre propre conception de bouton, il est recommandé d'utiliser des outils comme le générateur de bouton CSS3.

CSS Butting Basics

La définition des bons boutons varie d'un site Web à l'autre, mais il existe des normes non techniques:

1. Accessibilité - C'est la chose la plus importante. Le bouton doit être facile à accéder aux personnes handicapées et aux utilisateurs utilisant des navigateurs plus anciens. L'ouverture du réseau est magnifique, ne la détruisez pas avec CSS insouciant.
2. Texte simple - Gardez le texte à l'intérieur du bouton court et clair. L'utilisateur doit être en mesure de comprendre immédiatement ce qu'est le bouton et où il les prendra.

Presque tous les boutons que vous voyez en ligne utilisent certaines variations des changements de couleur, des temps de conversion, des frontières et des changements d'ombre. Ceux-ci peuvent être exploités à l'aide de diverses pseudo-classes CSS. Nous nous concentrerons sur deux d'entre eux - :hover et :active. :hover pseudo-classe définit comment CSS devrait changer lorsque la souris plane sur un objet. :active le plus souvent effectué entre l'utilisateur en appuyant sur le bouton de la souris et en relâchant le bouton de la souris.

L'ensemble de l'affichage d'un bouton peut être modifié à l'aide d'une pseudo-classe, mais ce n'est pas une approche conviviale. Une bonne stratégie pour les débutants consiste à apporter des modifications petites ou simples aux éléments de base du bouton tout en gardant le bouton familier. Les trois principaux éléments de base d'un bouton sont la couleur, les ombres et le temps de conversion.

Élément de base 1 - Color

C'est le changement le plus courant. Nous pouvons modifier les couleurs de divers attributs, les attributs les plus simples sont des propriétés color, background-color et border. Avant de passer à l'exemple, concentrons d'abord sur la façon de sélectionner la couleur du bouton:

1. combinaison de couleurs - Utilisez des couleurs complémentaires. Colorhexa est un excellent outil pour savoir quelles couleurs peuvent être utilisées ensemble. Si vous cherchez toujours des couleurs, consultez le sélecteur de couleurs d'interface utilisateur plat.
2. Faites correspondre votre palette - Il est généralement préférable de correspondre à toute palette que vous utilisez. Si vous cherchez toujours une palette de couleurs, consultez LolColors.

Élément de base 2 - Shadow

box-shadow vous permet d'ajouter des ombres autour d'objets. Une ombre unique peut être ajoutée de chaque côté, et l'interface utilisateur et la conception de matériaux aplaties profitent de l'idée. Pour en savoir plus sur box-shadow, veuillez consulter la documentation MDN box-shadow.

Élément de base 3 - Durée de transition

transition-duration vous permet d'ajouter des échelles de temps pour les modifications CSS. Un bouton sans temps de conversion sera immédiatement modifié en son :hover CSS, qui peut être offensant pour l'utilisateur. De nombreux boutons de ce guide utilisent le temps de conversion pour créer une sensation naturelle.

L'exemple suivant convertit le style du bouton de manière douce (plus de 0,5 seconde) lorsque :hover:

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

Le code pour exécuter la conversion est compliqué, donc les anciens navigateurs gèrent la conversion légèrement différemment. Par conséquent, nous devons inclure des préfixes de fournisseurs pour les navigateurs plus âgés.

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

Supprimer le style de bouton par défaut

Pour supprimer les styles de navigateur par défaut des éléments <button> afin que nous puissions leur fournir des styles personnalisés, nous incluons les CSS suivants:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

Cependant, il est préférable de l'appliquer aux classes sur les éléments des boutones, plutôt qu'à tous les boutons par défaut.

Il existe de nombreuses façons complexes et intéressantes de modifier comment changer votre CSS, et cette revue rapide ne couvre que les bases.

Styles à trois bouton

1 - Boutons simples en noir et blanc

Il s'agit généralement du premier bouton que j'ajoute dans mon projet parallèle car sa simplicité fonctionne dans une grande variété de styles. Ce style utilise le contraste parfait naturel du noir et blanc.

Ces deux modifications sont très similaires, nous allons donc introduire le code avec un bouton noir avec un fond blanc. Pour obtenir un autre bouton, retournez chaque blanc et noir.

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

Dans le style ci-dessus, vous verrez la police et background-color changer dans les deux directions pendant la durée de la conversion. Ceci est un exemple très simple. Pour construire à partir d'ici, vous pouvez utiliser les couleurs de votre marque préférée comme inspiration. L'utilisation de BrandColors est un excellent moyen de trouver des couleurs de ce type de marque. .2s

2 - bouton d'interface utilisateur plat

Flat UI se concentre sur le minimalisme et raconte une grande histoire à travers de petites actions. Une fois que mon projet commence à prendre forme, je migre généralement du bouton noir et blanc vers le bouton d'interface utilisateur aplati. Les boutons d'interface utilisateur plats sont assez simples pour s'adapter à la plupart des conceptions.

Amélilons nos boutons précédents en ajoutant des mouvements de bouton pour simuler les boutons 3D.

Cet exemple contient cinq boutons, mais comme le seul changement est la couleur, nous nous concentrerons sur le premier bouton.

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

Ce bouton a trois états: Général (nom sans état),

et :hover. :active

Il convient de noter que

ne contient qu'une seule ligne de code pour réduire l'opacité. Il s'agit d'une astuce utile pour rendre le bouton plus léger sans que vous trouviez une nouvelle couleur réellement plus claire. :hover Les variables

CSS ne sont pas nouvelles, mais certaines sont utilisées de nouvelles façons.

n'est pas une ligne uniforme solide, mais utilise border, border-bottom et border-left pour créer des effets de profondeur 3D. border-right

Les boutons d'interface utilisateur plats sont largement utilisés

. Lorsque notre exemple de bouton devient :active, deux choses se produisent. :active

1. Changement de 3px à 1px. Cela fait rétrécir l'ombre sous le bouton et déplacer l'objet du bouton entier vers le bas par plusieurs pixels. Bien que simple, ce changement aide l'utilisateur à sentir qu'il clique sur le bouton dans la page. border-bottom
La couleur change. La couleur d'arrière-plan devient sombre, simulant le mouvement physiquement loin de l'utilisateur et entrant dans la page. Encore une fois, ce changement subtil rappelle à l'utilisateur qu'il clique sur un bouton.

Les boutons d'interface utilisateur plats apprécient les mouvements simples et minimes qui racontent de grandes histoires. Beaucoup utilisent

pour créer un mouvement peu profond. Il convient de noter que certains boutons d'interface utilisateur plats ne se déplacent pas du tout, profitant uniquement des changements de couleur. border-bottom

3 - conception de matériaux

La conception des matériaux est un concept de conception qui favorise les cartes d'information et propose des actions convaincantes. Google a conçu le concept de "conception de matériaux" et a énuméré trois principes principaux sur la page d'accueil de Material Design:

Le matériau est une métaphore
audacieux, graphique, utile
Les sports donnent un sens

Pour mieux comprendre ces trois principes, jetons un coup d'œil à l'application pratique de la conception des matériaux.

Remarque: Cet exemple n'inclut pas la balise car il suit la balise par défaut du bouton de polymère, mais si vous implémentez le polymère dans un grand projet, il vaut la peine d'explorer l'utilisation de la balise <button> dans votre implémentation Au lieu de la balise <button>. Nous explorerons cela plus en détail dans les futurs articles. <a>

Ces boutons utilisent deux idées principales - box-shadow et le polymère.

Polymer est un cadre de composants et d'outils pour aider à concevoir des sites Web. Si vous connaissez Bootstrap, le polymère est très similaire. L'effet d'entraînement puissant trouvé ci-dessus peut être ajouté dans une seule ligne de code.

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

<paper-ripple fit></paper-ripple> est un composant polymère. En important du polymère au début de HTML, nous pouvons accéder aux cadres populaires et à leurs composants. En savoir plus sur la page d'accueil du projet Polymer.

Maintenant que nous comprenons ce qu'est le polymère et d'où viennent les ondulations (comment cela fonctionne est une autre histoire), discutons du CSS qui aide à mettre en œuvre les principes de conception des matériaux pour que le bouton se démarque.

transition-duration: 0.5s /* 这是标准的，并且适用于大多数现代浏览器 */
-webkit-transition-duration: 0.5s; /* 帮助某些版本的Safari、Chrome和Android */
-moz-transition-duration: 0.5s; /* 帮助Firefox */

Ces boutons utilisent box-shadow pour réaliser la majeure partie de la conception. Voyons comment box-shadow change et joue sa magie en supprimant tout CSS qui ne change pas:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

box-shadow utilisé pour placer une fine ombre à gauche et en bas de chaque bouton. Une fois cliqué, les ombres s'étendent davantage et deviennent moins sombres. Cette action simule l'ombre 3D du bouton passant de la page à l'utilisateur. Cette action fait partie des styles de conception de matériaux et de leurs principes de demande pratiques.

Les boutons de conception de matériaux peuvent être fabriqués en combinant le polymère avec des effets box-shadow.

• Le matériau est une métaphore - en utilisant box-shadow, nous pouvons simuler des ombres 3D qui apparaissent dans les objets du monde réel
• Audacieux, graphique, utile - c'est plus réaliste pour les boutons bleu vif et vert, et ces boutons satisfont complètement cela.
Le mouvement
• donne un sens - en utilisant des conversions polymères et box-shadow, nous pouvons créer beaucoup de mouvement lorsque l'utilisateur clique sur un bouton.

Cet article décrit comment utiliser trois méthodes de conception différentes pour fabriquer des boutons. Si vous souhaitez créer votre propre prototype de conception de bouton, je recommande d'utiliser le générateur de bouton CSS3.

Conclusion

Les boutons en noir et blanc sont simples et fiables. Remplacez le noir et blanc par les couleurs de votre marque pour obtenir un accès rapide aux boutons liés à votre site Web. Les boutons d'interface utilisateur plats sont simples et utilisent de petites actions et des couleurs pour raconter de grandes histoires. Le bouton de conception de matériaux utilise des actions complexes massives pour simuler les ombres du monde réel, attirant ainsi l'attention des utilisateurs.

J'espère que ce guide aidera les débutants au CSS à comprendre les blocs de construction qui rendent les boutons si puissants et créatifs.

Des questions fréquemment posées sur les boutons CSS modernes

Comment créer un bouton CSS simple?

La création d'un bouton CSS simple consiste à définir une classe dans votre fichier CSS et à l'appliquer aux éléments de bouton dans le fichier HTML. Par exemple, vous pouvez définir une classe .button dans un fichier CSS qui contient des attributs tels que background-color, color, border, padding, text-align, text-decoration, display, cursor, .button, .button, et

, etc. Ensuite, dans le fichier HTML, vous pouvez créer un élément de bouton et y appliquer la classe

. Cela stylisera le bouton en fonction des propriétés définies dans la classe

.

:hover Comment ajouter un effet de survol du bouton CSS? :hover

Vous pouvez utiliser le

pseudo-classe pour ajouter un effet de survol du bouton CSS. Cette pseudo-classe est utilisée pour sélectionner et définir le style de l'élément lorsque le pointeur utilisateur s'offre. Par exemple, lorsque le pointeur utilisateur plane dessus, vous pouvez modifier la couleur d'arrière-plan et la couleur du texte du bouton en définissant ces propriétés dans la pseudo-classe

de la classe de bouton.

Comment créer un bouton CSS avec une icône?

Les boutons

CSS avec des icônes peuvent être créés en utilisant des polices d'icônes ou des icônes SVG. Les polices d'icônes telles que Font Awesome offrent une variété d'icônes faciles à styliser avec CSS. Pour utiliser les polices d'icônes, vous devez inclure le fichier CSS de la police d'icône dans le fichier HTML, puis utiliser la classe correspondante de l'icône que vous souhaitez utiliser. D'un autre côté, les icônes SVG peuvent être intégrées directement dans des fichiers HTML et stylisées à l'aide de CSS.

linear-gradient() Comment créer un bouton CSS avec le gradient? radial-gradient() Les boutons

CSS avec gradients peuvent être créés à l'aide de la fonction

ou de la fonction

. Ces fonctions sont utilisées pour définir respectivement les gradients linéaires ou les gradients radiaux. Un dégradé est défini par deux ou plusieurs points d'arrêt de couleur qui sont les couleurs dans lesquelles le gradient convertit. Le point d'arrêt de la couleur est défini par la couleur et la position de couleur le long de la ligne de dégradé.

border-radius Comment créer des boutons CSS avec des coins arrondis? border-radius Les boutons

CSS avec des coins arrondis peuvent être créés à l'aide de l'attribut

. Cette propriété est utilisée pour définir le rayon du coin frontière. La valeur de l'attribut

peut être spécifiée en pixels ou pourcentages. Une valeur plus élevée créera un coin plus arrondi.

box-shadow Comment créer un bouton CSS avec l'ombre? box-shadow Les boutons

CSS avec des ombres peuvent être créés à l'aide de l'attribut

. Cette propriété est utilisée pour appliquer les effets de l'ombre aux éléments. La propriété

prend plusieurs valeurs, y compris le décalage horizontal de l'ombre, le décalage vertical, le rayon flou, le rayon étendu et la couleur.

transition Comment créer un bouton CSS avec transition? transition Les boutons

CSS avec transitions peuvent être créés à l'aide de l'attribut . Cette propriété est utilisée pour contrôler la vitesse à laquelle l'utilisateur passe d'un style à un autre lorsqu'il survole un bouton ou clique sur un bouton. Les attributs prennent plusieurs valeurs, y compris l'attribut à convertir, la durée de la conversion, la fonction de synchronisation et le retard.

Comment créer des boutons CSS avec des animations?

Les boutons

CSS avec des animations peuvent être créés à l'aide de règles animation Propriétés et keyframes. L'attribut animation est utilisé pour spécifier le nom, la durée, la fonction de synchronisation, le retard, le nombre d'itérations, la direction, le mode de remplissage et l'état de lecture de l'animation. La règle keyframes est utilisée pour spécifier des styles pour chaque étape de l'animation.

Comment créer des boutons CSS réactifs?

Les boutons CSS réactifs peuvent être créés à l'aide de requêtes multimédias. Les requêtes multimédias sont utilisées pour appliquer différents styles pour différents appareils ou tailles d'écran. Par exemple, vous pouvez définir une requête multimédia qui modifie la taille, le remplissage et la taille de la police des boutons pour les écrans avec des largeurs de moins de 600 pixels.

Comment créer des boutons CSS avec différentes formes?

Les boutons

CSS avec différentes formes peuvent être créés à l'aide des attributs border-radius Attributs et transform. La propriété border-radius peut être utilisée pour créer des boutons circulaires ou ovales. La propriété transform peut être utilisée pour faire pivoter, zoomer, incliner ou PAN.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!