Comment créer un kit d'interface utilisateur de boutons

Le thème de la semaine 6 du défi hebdomadaire de codage est le suivant:

Boutons

"Un bouton? ”vous pourriez demander… Oui! Un bouton!

"Mais pourquoi?"

Parce qu'un bouton est l'un des éléments constitutifs de tout site Web / application Web. Que vous soyez sur Facebook, Twitter, Google, etc., vous trouverez toujours un bouton vous permettant d’interagir avec l’application. Donc, cette semaine, nous allons construire des boutons - beaucoup de boutons!

Si vous souhaitez participer au Challenge, n'hésitez pas à créer tout type de boutons: boutons 3D, boutons avec effet d'entraînement, boutons d'animation, etc. - le ciel est la limite. Sois créatif! Vous savez à quel point j'apprécie la créativité!

Dans cet article, nous allons créer plusieurs boutons et les mettre tous dans un kit d'interface utilisateur:

Avant de passer à la partie implémentation, voyons les différents états dans lesquels un bouton peut être:

  1. État par défaut
  2. État de survol - lorsque la souris est sur le bouton
  3. Etat actif - lorsque le bouton est enfoncé
  4. Etat de la mise au point - lorsque le bouton est en surbrillance. Autorisé sur les éléments acceptant les événements de clavier. Ceci est utilisé pour donner aux utilisateurs qui utilisent uniquement le clavier des indications lorsqu’ils traversent l’application.
  5. État désactivé

Nous devons styliser les boutons pour couvrir tous ces états.

De plus, nous aurons trois types de boutons différents: primaire, secondaire et tertiaire et deux tailles supplémentaires: grand et petit.

Le HTML

Nous utilisons des classes pour différencier les différents types de boutons.

Le CSS

.btn est la classe principale utilisée par tous nos boutons:

️ Un style général pour le rendre meilleur que la version par défaut.

Ensuite, nous avons les différents états:

Pour avoir une différence entre les états, nous pouvons jouer avec la propriété opacity.

Initialement, le bouton a une opacité: 1 et nous la réduisons légèrement lorsque nous la survolons, puis un peu plus lorsque le bouton est désactivé. Cependant, lorsque nous cliquons sur le bouton, nous redéfinissons l'opacité sur 1, ce qui donne un bel effet.

Pour l'état de focus, nous supprimons la propriété de contour par défaut et nous ajouterons une propriété box-shadow, mais nous le ferons séparément pour chaque type de bouton, car la couleur change en fonction de la classe (voir ci-dessous).

Les couleurs individuelles sont définies sur les classes .btn-primaire, .btn-secondaire et .btn-tertiaire:

Comme vous pouvez le constater, nous utilisons la méthode des variables CSS pour définir la même couleur sur différentes propriétés. Mais pour que cela fonctionne, nous devons déclarer les variables de couleur sur: root comme suit:

Notez que c’est une bonne pratique d’ajouter la déclaration: root en haut du fichier css.

Enfin, ajoutons les deux tailles supplémentaires. Classes .btn-large et .btn-small:

Conclusion

Vous voyez comme il est facile de créer un kit d'interface utilisateur de boutons?

En bonus, vous pouvez ajouter un effet d'entraînement aux boutons via JavaScript. J'ai déjà fait cela dans un article précédent - vous pouvez le vérifier en cliquant ici!

J'espère que vous avez aimé ce défi et j'ai hâte de voir ce que vous allez créer!

Bon codage!

Initialement publié sur www.florin-pop.com.