Share
Chaque designer aime les boutons. C'est un fait révélé par l'appréciation de projets tels que Unicorn UI (qui au moment de la rédaction de cet article ne prend en charge que les boutons et compte près de 4 000 Stargazers sur GitHub)..
Mais aucun designer ne rentre dans une boîte. Nous avons tous nos propres désirs et besoins à partir d'un cadre de boutons. Nous voulons tous voir certains types de boutons, et peut-être sommes-nous devenus très bons pour concevoir un certain type de bouton. Alors, pourquoi ne faisons-nous pas notre propre kit d'interface utilisateur à partir de zéro?
La base simple mais très efficace pour notre framework d'interface utilisateur de boutonsPremièrement, nous devons identifier les éléments que nos boutons pourront cibler. Dans notre cas, assurons-nous que toute balise d'ancrage, d'entrée ou de bouton puisse être stylée via notre kit d'interface utilisateur. Pour ce faire, créons du balisage:
Bouton
J'utilise un attribut pour le faire simplement parce que je pense que ça a l'air mieux. Cela n’est peut-être pas terriblement pérenne (que se passera-t-il si le W3C introduit une nouvelle spécification pour les attributs ui?) Mais si cela vous inquiète, vous pouvez nommer un espace de noms. ui comme quelque chose comme cory-ui dans ce cas, je parie que vous êtes à l'abri des nouvelles introductions du W3C. Si vous êtes vraiment très inquiet à ce sujet ou si vous êtes fou de performance, vous pouvez utiliser des classes et obtenir le même effet, mais vous pouvez rencontrer des problèmes de redondance de classes à certains moments..
Nous allons utiliser le préprocesseur Stylus CSS pour éviter d'écrire un million d'accolades. Notre code a donc une apparence soignée et nette, sans répétition. Même si vous n'êtes pas familier avec Stylus, vous devriez pouvoir suivre en utilisant un autre préprocesseur ou CSS vanille..
Commençons par définir quelques styles par défaut. [ui * = "bouton"] sélecteur. Nous utilisons le sélecteur d'étoiles dans ce contexte afin que vous puissiez ajouter un «bouton» n'importe où dans votre attribut et cela fonctionnera.
[ui * = "bouton"] curseur: transition de pointeur: tout bordure de soulagement de 200 ms: 0 fond d'écran: assombrir (blanc, 5%) couleur: éclaircir (noir, 20%) remplissage: .5em 1.75em texte-decoration: aucune &: hover background: assombrir (blanc, 10%)
Maintenant la partie amusante. Commençons par ajouter tous les attributs que nous pensons pouvoir utiliser. Par exemple, je sais que je veux pouvoir utiliser des boutons de différentes tailles. Je vais donc ajouter des tailles à mes boutons:
Bouton
[ui * = "bouton"] curseur: transition de pointeur: tout bordure de soulagement de 200 ms: 0 fond d'écran: assombrir (blanc, 5%) couleur: éclaircir (noir, 20%) remplissage: .5em 1.75em texte-decoration: aucune &: hover background: assombrir (blanc, 10%) & [ui * = "petit"] remplissage: 0,25em 1em taille de police: .75em & [ui * = "grand"] remplissage: .75em 2em taille de police: 1.25em & [ui * = "énorme"] padding: 1em 3em taille de la police: 1.25em
Remarquez comment nous sommes annexant les attributs sur notre sélecteur d'attribut de bouton? Cela signifie que ces attributs ne fonctionneront pas pour les éléments qui n'ont pas ui = "bouton". C’est un bon moyen de garder nos modifications étendues à divers attributs que nous pourrions vouloir ajouter..
Continuons et ajoutons quelques arrondis à nos boutons:
Bouton
& [ui * = "round"] border-radius: 5px & [ui * = "pill"] border-radius: 999em
Le plus petit bouton a des coins arrondis, le second est devenu une "pilule"Vous devriez maintenant vous familiariser davantage avec ce concept. Ajoutons des couleurs sous forme de variables:
Bouton
couleur-primaire = bleu couleur-danger = rouge [ui * = "bouton"] curseur: pointeur transition: tout 200 ms bordure de facilité: 0 fond: plus foncé (blanc, 5%) couleur: plus clair (noir, 20%) padding:. 5em 1.75em texte-decoration: aucune &: survol arrière-plan: plus foncé (blanc, 10%) & [ui * = "petit"] padding: .25em 1em taille-de-police: .75em & [ui * = "large"] padding : .75em 2em taille de police: 1.25em & [ui * = "énorme"] remplissage: 1em 3em taille de police: 1.25em & [ui * = "round"] border-radius: 5px & [ui * = "pill "] border-radius: 999em & [ui * =" primaire "] fond: couleur couleur primaire: blanc & [ui * =" danger "] fond: couleur-danger couleur: blanc
C'est l'essentiel! Ajoutez autant de règles et de propriétés que vous le souhaitez. Vous pouvez même ajouter des thèmes complexes à vos boutons, des états de survol et des animations intéressants. Partagez votre interface utilisateur de boutons avec nous dans les commentaires!
Accentsconagua