Catégories
Plugin et site web

8 extraits CSS de commutateur à bascule tip-top

Les commutateurs à bascule ne sont peut-être pas les éléments d'interface utilisateur les plus visibles d'un formulaire, mais ils ont sans doute fait plus pour pimenter une tâche banale qu'autre chose. Avant que les bascules n'arrivent, nous utilisions souvent un seul élément de case à cocher pour «activer» ou désactiver quelque chose. Bien que le travail soit fait, le look n'était pas très convaincant.

Les bascules, en revanche, offrent aux concepteurs la possibilité de personnaliser davantage l'interface utilisateur d'une manière qui correspond au reste d'un site Web. En termes simples, ils donnent à un site Web un aspect plus «assemblé» qu'une case à cocher fade. De plus, ils sont également une excellente occasion d'intégrer des micro-interactions utiles.

Et nous commençons à voir les interrupteurs à bascule évoluer depuis leurs débuts plus simplistes. Aujourd'hui, nous allons vous présenter quelques exemples passionnants de la façon dont les concepteurs apportent plus de plaisir à ces éléments tout en conservant leur utilité.

La boîte à outils Web Designer

Téléchargements illimités: plus de 1 000 000 modèles Web, thèmes, plug-ins, éléments de conception et bien plus encore!

Zoom-Zoom

Ce commutateur inspiré des circuits de course est un excellent exemple de la manière dont une certaine créativité peut transformer un élément de formulaire simple en quelque chose qui étend davantage votre message de marque. Imaginez utiliser quelque chose comme ça pour encourager les utilisateurs à s'inscrire à une newsletter. Cet effort supplémentaire pourrait fournir le peu de motivation dont l'utilisateur a besoin pour prendre sa décision.

Différents traits

Ce qui est cool avec cet ensemble de bascules, c'est qu'ils démontrent la puissance de ce que nous pouvons faire avec juste un peu de CSS. Portez une attention particulière aux exemples «biaisé» et «inversé», car ils font un excellent travail en rendant l'expérience un peu plus intuitive.

Conçu pour Bootstrap

Cette collection de commutateurs a été conçue sur mesure pour une utilisation avec le framework Bootstrap. Remarquez la variété de tailles disponibles et comment l'étiquetage «OFF / ON» rend les choses claires pour les utilisateurs. Tout comme les autres éléments de formulaire, un étiquetage clair est également indispensable pour les basculements.

Ours avec nous

Nous avons ici un exemple qui, bien que ce ne soit peut-être pas le choix le plus pratique, est indéniablement créatif et amusant. Le nez de l’ours peut être basculé, ce qui l’amène à «regarder» dans l’autre sens. Ce sont les touches subtiles, telles que les yeux clignotants, qui lient vraiment celui-ci.

Appuie sur le bouton

Nous avons tendance à considérer les interrupteurs à bascule comme un élément qui glisse horizontalement lorsque l'utilisateur fait son choix. Mais ici, nous avons une excellente conception de bouton-poussoir qui rend les choses encore plus évidentes pour l'utilisateur. Un simple clic ou toucher et l'animation lisse prend le relais pour confirmer votre décision.

Jour et nuit

Restez avec moi sur celui-ci. Que diriez-vous d'une bascule qui peut aider à mieux illustrer un concept? Ici, nous avons un commutateur animé qui passe d'une nuit étoilée à une journée ensoleillée. C'est peut-être exagéré, mais je pense vraiment que cela pourrait être utile pour quelque chose comme une candidature en ligne, où l'utilisateur définit une préférence pour les quarts de jour ou de nuit. Encore avec moi? Non?

Dis-moi ce que tu ressens vraiment

Emoji a envahi nos communications quotidiennes – ce qui pourrait être une bonne ou une mauvaise chose, selon la façon dont vous les utilisez. Mais cet ensemble amusant de commutateurs nous montre qu'ils prendront bientôt également le dessus sur nos formes. Courez tant que vous le pouvez encore!

Collectez les tous

Et enfin, voici une collection à bascule qui propose une variété de styles et d'effets d'animation. Il n'y a rien d'extraordinaire dans cet ensemble attrayant, mais vous êtes sûr de trouver quelque chose qui conviendra à votre prochain projet.

Tourne le bouton

Les extraits ci-dessus illustrent comment les commutateurs à bascule peuvent être à la fois utiles et incroyablement polyvalents. Ils donnent l'impression qu'une case à cocher ne peut tout simplement pas correspondre et vous donnent l'occasion d'exercer vos muscles créatifs. Prenez le temps, expérimentez et voyez comment ces éléments peuvent encore améliorer vos formulaires.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *