Boutons fantômes avec conscience directionnelle dans CSS

Vous avez peut-être vu des boutons fantômes? Ils se caractérisent par des arrière-plans transparents et l'arrière-plan est rempli de couleur unie lorsque la souris plane. Smashing Magazine a un article sur ce sujet. Cet article créera un bouton fantôme, mais cette partie est relativement simple. Fait intéressant et délicat, nous allons avoir l'animation de remplissage du bouton fantôme commence par le survol de la souris.

Voici un exemple de bouton fantôme de base:

Dans la plupart des cas, la couleur d'arrière-plan passe à la couleur unie. Certains modèles rempliront les boutons de gauche à droite, de haut en bas, etc. pour augmenter l'effet visuel. Par exemple, remplissez de gauche à droite:

Voici un petit problème d'expérience utilisateur. Si la souris plane sur le bord de la zone remplie, il semblera que quelque chose ne va pas. Considérez cet exemple, le bouton se remplit de la gauche, pendant que vous planez de la droite.

Il est préférable de faire remplir le bouton à partir du point de survol initial.

Alors, comment donnons-nous la perception de la direction du bouton? Votre intuition initiale pourrait être d'utiliser JavaScript, mais nous pouvons le faire avec CSS et quelques balises supplémentaires.

Pour ceux qui veulent jeter un coup d'œil aux résultats, voici quelques boutons fantômes conscients de la direction mis en œuvre dans Pure CSS!

Construisons-le pas à pas. Tout le code peut être trouvé dans cette collection de codepen.

Créer un base

Commençons par les bases de la création du bouton fantôme. Le marquage est simple.

 <button>Huer!</button>

Notre implémentation CSS utilisera les propriétés personnalisées CSS. Cela facilite la maintenance et facilite également la personnalisation via des propriétés en ligne.

 bouton {
  --WorderWidth: 5;
  --boxshadowDepth: 8;
  --ButtonColor: # f00;
  --Fontsize: 3;
  - horizontalpadding: 16;
  --VerticalPadding: 8;

  Contexte: transparent;
  Border: calc (var (- borderwidth) * 1px) Solid var (- ButtonColor);
  Box-Shadow: calc (var (- boxshadowdepth) * 1px) calc (var (- boxshadowdepth) * 1px) 0 # 888;
  Couleur: var (- ButtonColor);
  curseur: pointeur;
  taille de police: calc (var (- fontsize) * 1Rem);
  Police-poids: Bold;
  Aperçu: transparent;
  rembourrage: calc (var (- verticalpadding) * 1px) calc (var (- horizontalpadding) * 1px);
  Transition: Box-Shadow 0,15S Ease;
}

Bouton: Hover {
  Box-Shadow: calc (var (- boxshadowdepth) / 2 * 1px) calc (var (- boxshadowdepth) / 2 * 1px) 0 # 888;
}

bouton: actif {
  Box-Shadow: 0 0 0 # 888;
}

Assembler et nous obtenons:

très bien! Nous avons un bouton et un effet de survol, mais il n'y a pas encore d'effet de remplissage. Ajoutons ensuite l'effet de remplissage.

Ajouter le remplissage

Pour ce faire, nous créons des éléments pour afficher l'état de remplissage du bouton fantôme. L'astuce consiste à utiliser clip-path pour recadrer ces éléments et les cacher. Nous pouvons les afficher sur survol en convertissant clip-path .

Ils doivent être alignés sur le bouton parent. Nos variables CSS seront d'une grande aide ici.

Au début, nous pourrions envisager d'utiliser des pseudo-éléments. Cependant, pour chaque direction, le nombre de pseudo-éléments ne suffit pas. Ils affectent également l'accessibilité… plus à ce sujet plus tard.

Commençons par ajouter un rembourrage de gauche à droite. Tout d'abord, en ajoutons un<span></span> élément. Devrait<span></span> L'élément doit avoir le même contenu texte que le bouton.

<button>
  <span>Huer!</span>
  Huer!
</button>

Maintenant, nous devons<span></span> Les éléments sont alignés avec les boutons. Nos variables CSS feront la plupart du travail.

 Button Span {
  Contexte: var (- ButtonColor);
  Border: calc (var (- borderwidth) * 1px) Solid var (- ButtonColor);
  En bas: calc (var (- borderwidth) * -1px);
  couleur: var (- bg, #fafafa);
  gauche: calc (var (- borderwidth) * -1px);
  rembourrage: calc (var (- verticalpadding) * 1px) calc (var (- horizontalpadding) * 1px);
  Position: absolue;
  Droite: calc (var (- borderwidth) * -1px);
  en haut: calc (var (- borderwidth) * -1px);
}

Enfin, nous allons<span></span> L'élément est recadré en dehors de la vue et ajoute une règle pour l'afficher sur le plan en survol en mettant à jour la récolte. La définition d'une transition ajoutera un glaçage sur le gâteau.

 Button Span {
  --Clip: encadré (0 100% 0 0);
  -Webkit-Clip-path: var (- clip);
  Clip-path: var (- clip);
  Transition: Clip Path 0,25S Ease, -Webkit-Clip-Path 0,25S Factive;
  / * ... Styles div restants * /
}

Bouton: Span survolez-vous {
  --Clip: encadré (0 0 0 0);
}

Ajouter une conscience directionnelle

Alors, comment ajouterons-nous la conscience directionnelle? Nous avons besoin de quatre éléments. Chaque élément sera responsable de la détection du point d'entrée de survol. À l'aide de clip-path , nous pouvons diviser la zone du bouton en quatre parties.

Ajoutons quatre au bouton<span></span> éléments et positionnez-les pour remplir les boutons.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Huer!
</button>

Button Span {
  Contexte: var (- bg);
  En bas: calc (var (- borderwidth) * -1px);
  -Webkit-Clip-path: var (- clip);
  Clip-path: var (- clip);
  gauche: calc (var (- borderwidth) * -1px);
  Opacité: 0,5;
  Position: absolue;
  Droite: calc (var (- borderwidth) * -1px);
  en haut: calc (var (- borderwidth) * -1px);
  Z-Index: 1;
}

Nous pouvons localiser chaque élément et attribuer des cultures et des couleurs à l'aide de variables CSS.

 Button Span: Nth of-Type (1) {
  --BG: # 00F;
  --Lip: polygone (0 0, 100% 0, 50% 50%, 50% 50%);
}
Button Span: Nth of-Type (2) {
  --BG: # f00;
  --Lip: polygone (100% 0, 100% 100%, 50% 50%);
}
Button Span: Nth of-Type (3) {
  --BG: # 008000;
  --Lip: polygone (0 100%, 100% 100%, 50% 50%);
}
Button Span: Nth of-Type (4) {
  --BG: # 800080;
  --Clip: polygone (0 0, 0 100%, 50% 50%);
}

Très cool. Pour tester cela, changeons l'opacité tout en planant.

 Button Span: Nth of-Type (1): Hover,
Button Span: Nth of-Type (2): Hover,
Button Span: Nth of-Type (3): Hover,
Button Span: Nth of-Type (4): Hover {
  Opacité: 1;
}

Oh, il y a une question ici. Si nous entrons et passons sur une section, puis survons un autre, la direction de remplissage changera. Cela ne semble pas juste. Pour résoudre ce problème, nous pouvons définir z-index et clip-path sur le plan de volant afin qu'une partie de l'espace soit remplie.

 Button Span: Nth of-Type (1): Hover,
Button Span: Nth of-Type (2): Hover,
Button Span: Nth of-Type (3): Hover,
Button Span: Nth of-Type (4): Hover {
  --Clip: polygone (0 0, 100% 0, 100% 100%, 0 100%);
  Opacité: 1;
  Z-Index: 2;
}

Combiner ensemble

Nous savons comment créer des animations de remplissage et nous savons comment détecter les directions. Comment combinons-nous les deux? Utilisez un combo au même niveau!

Cela signifie que lorsque nous planons un segment, nous pouvons afficher un élément de remplissage spécifique.

Tout d'abord, mettons à jour la balise.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>Huer!</b>
  <b>Huer!</b>
  <b>Huer!</b>
  <b>Huer!</b>
  Huer!
</button>

Maintenant, nous pouvons mettre à jour le CSS. Se référant à notre rembourrage de gauche à droite, nous pouvons réutiliser les styles. Nous avons juste besoin de définir un clip-path spécifique pour chaque élément. Je l'ai géré dans le même ordre que certaines valeurs d'attribut. Le premier élément enfant est le haut, le second est le droit, et ainsi de suite.

 Bouton B: Nème de type (1) {
  --Clip: encadré (0 0 100% 0);
}
Bouton B: Nème de type (2) {
  --Clip: encadré (0 0 0 100%);
}
Bouton B: Nème de type (3) {
  --Clip: encadré (100% 0 0 0);
}
Bouton B: Nème de type (4) {
  --Clip: encadré (0 100% 0 0);
}

La dernière étape consiste à mettre à jour clip-path de l'élément pertinent lors de la surtension du segment de l'appariement.

 Button Span: Nth of-Type (1): Hover ~ B: Nth of-Type (1),
Button Span: Nth of-Type (2): Hover ~ B: Nth of-Type (2),
Button Span: Nth of-Type (3): Hover ~ B: Nth of-Type (3),
Button Span: Nth of-Type (4): Hover ~ b: Nth-of-Type (4) {
  --Clip: encadré (0 0 0 0);
}

Très bien! Nous obtenons un pur bouton fantôme CSS avec une conscience directionnelle.

Accessibilité

Dans l'état actuel, le bouton est inaccessible.

Ces éléments supplémentaires n'aident pas beaucoup, car le lecteur d'écran répète le contenu quatre fois. Nous devons cacher ces éléments au lecteur d'écran.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">Huer!</b>
  <b aria-hidden="true">Huer!</b>
  <b aria-hidden="true">Huer!</b>
  <b aria-hidden="true">Huer!</b>
  Huer!
</button>

Plus de contenu en double.

C'est tout!

Avec juste un marquage supplémentaire et quelques astuces CSS, nous pouvons créer des boutons fantômes avec une conscience directionnelle. En utilisant un préprocesseur ou en combinant un composant dans votre application, vous n'avez pas besoin d'écrire tout le HTML.

Il s'agit d'une démonstration de l'utilisation de variables CSS en ligne pour contrôler la couleur du bouton.

Cette sortie révisée maintient l'image d'origine et utilise un phrasé plus concis et varié tout en préservant la signification centrale du texte d'origine. Il aborde également le problème d'accessibilité mentionné dans l'article d'origine.

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!