10 extraits CSS gratuits pour créer des tableaux de prix réactifs

La page de tarification est un élément de base pour toute boutique en ligne. Il est utilisé pour les produits SaaS, les sociétés de services et les boutiques de commerce électronique sur le Web.

Et aucune page de tarification ne serait complète sans un tableau de tarification comparant les options, les fonctionnalités et (naturellement) les prix. Mais concevoir le vôtre à partir de zéro peut être un problème.

C'est là que ces tableaux de tarification open source peuvent vous aider. Ils sont tous entièrement réactifs et fonctionnent parfaitement comme modèles, que vous souhaitiez personnaliser le vôtre ou simplement réutiliser le code existant pour gagner du temps.

1. Table d'icônes par Travis Williamson

De superbes visuels se vendent toujours. Il peut s'agir de photos de produits ou d'illustrations personnalisées, mais les visuels attirent l'attention plus rapidement que le texte.

Ce tableau de prix iconifié est un excellent exemple de ce qui est possible avec les colonnes de tableau visuel. En ajoutant des icônes, vous pouvez informer les clients de ce qu'ils obtiennent avec chaque colis avant même qu'ils ne lisent quoi que ce soit. Les icônes présentent différentes puissances et fonctionnalités. Le plus petit plan a un avion en papier, tandis que le plus grand plan utilise une fusée complète. Parlez de contraste!

Voir le stylo
Tableau des prix par Travis Williamson (@travisw)

2. Zebra Striping avec couleurs par Agustin Ortiz

Cet exemple a un tableau de prix beaucoup plus simple et suit des règles de conception plus conventionnelles. Il utilise des rayures zébrées, de grands en-têtes de tarification et diverses couleurs pour aider un format de tarification spécifique à se démarquer des autres.

Les couleurs peuvent sembler un peu fortes, ce n'est donc pas parfait pour toutes les mises en page. Mais vous pouvez facilement changer les couleurs tout en conservant le même format pour que ce tableau de prix fonctionne sur votre propre site.

Voir le tableau des prix des stylos | Tabla de Precios d'Agustin Ortiz

3. Table violet foncé par Mike Torosian

Pour un design de table plus sombre et plus riche, consultez ce tableau de prix violet. Il utilise des dégradés d'arrière-plan et des effets de survol de bordure pour créer l'un des tableaux de prix les plus professionnels sur le Web. Il est également entièrement réactif, de sorte que les éléments du tableau se décomposent en lignes à mesure que le navigateur devient plus petit.

Voir le tableau des prix des stylos par Mike Torosian

4. Tarification professionnelle par LittleSnippets

Les sites Web B2B recherchent souvent des conceptions plus professionnelles qui s'éloignent des schémas de couleurs créatifs et des icônes superflues. Cette conception de prix en est un exemple suivant un schéma de couleurs typique de nuances sombres et claires.

Une colonne de prix utilise une surbrillance bleu foncé pour sortir du reste du tableau. C'est une pratique courante de suivre cette technique car elle peut conduire à un taux de conversion plus élevé. C'est pourquoi le plan "professionnel" utilise également une ombre portée pour apparaître au-dessus des autres colonnes. Mais lorsqu'il est redimensionné plus petit, il tombe dans une formation de pile pour une navigation plus facile.

Voir le Pen #1214 – Tableau des prix par LittleSnippets

5. Table avec effets de survol par Nidheesh Balachandran

Dans cette conception de tableau de prix, vous trouverez de superbes effets de survol qui ajoutent de la couleur aux en-têtes de tableau assombris. Ils laissent chacun place à une image de fond de votre choix, et l'effet de survol est géré via CSS.

Une autre chose que j'aime est l'événement click lié à toute la colonne du tableau. De cette façon, si un visiteur clique n'importe où sur la colonne, il le dirigera directement vers la page d'inscription correspondante.

Voir le tableau des prix des stylos par Nidheesh Balachandran

6. Tableaux de prix bootstrap par Sahar Ali Raza

Je suis un grand fan de Bootstrap car il y a tellement de choses que vous pouvez faire avec le framework et ses thèmes associés. Un tel exemple est cet exemple de tableau de prix.

Une grande partie de cette conception est codée sur mesure, y compris les arrière-plans d'en-tête inclinés et les animations de survol. Mais la disposition globale repose sur Bootstrap, ce qui le rend entièrement réactif par défaut. La typographie est époustouflante et j'aime aussi les animations de survol lors du déplacement sur chaque ligne. Il s'agit d'une conception de table épurée qui pourrait fonctionner pour presque tous les types de sites Web.

Voir le tableau des prix Pen Bootstrap par Sahar Ali Raza

7. Tableau des prix de Material Design par Morten Srensen

Si vous aimez la conception matérielle de Google, vous aimerez certainement ce tableau de prix. Il s'agit d'une table d'interface utilisateur matérielle qui suit de nombreuses fonctionnalités suggérées par Google, telles que les survols d'ombres portées et les schémas de couleurs plates.

Voir le stylo
Tableaux de prix Material Design (flexbox) par Morten Srensen.

8. Tableau des prix clair et simple par Daniel Hearn

Super propre et léger décrit le mieux ce tableau de prix blanc. Il ne repose pas sur de nombreuses couleurs ou caractéristiques sophistiquées pour se démarquer. Au lieu de cela, il utilise du gris pour les en-têtes et du noir/blanc pour le contraste du texte. Cela fonctionne bien car les boutons CTA conservent un fort effet de contour vert.

Lorsque vous réduisez la couleur d'un tableau, vous attirez l'attention sur les seules zones colorées, ce qui encourage généralement davantage de clics. Comme il s'agit de CSS pur, vous pourrez facilement mettre à jour la couleur du bouton en fonction de votre conception.

Voir le tableau des prix des stylos -1 par Daniel Hearn

9. Tableaux WIP par Dylan McLeod

Pour un travail en cours, je dois dire que cet ensemble de tableaux de prix colorés est incroyable. Il suit de nombreuses techniques traditionnelles telles que la mise en évidence des en-têtes de tableau et le maintien d'une colonne plus grande que les autres.

Mais je suis surtout impressionné par les différents choix de couleurs qui se marient si bien ensemble. C'est presque comme si ces tableaux avaient quelques en-têtes différents, et ils attirent tous votre attention pour diverses raisons.

Voir les tableaux de prix des stylos par Dylan McLeod

10. Conte de prix Flexbox par CSSGirl

Maintenant, pour une vraie conception de table orientée vers l'avant, consultez cette table flexbox. Lorsque vous passez la souris sur le tableau, chaque colonne s'agrandit un peu et augmente la couleur d'arrière-plan. Cela aide la colonne à se démarquer des autres et à attirer l'attention plus rapidement. C'est un bel effet qui se répercute sur les transitions CSS du tableau lors du redimensionnement du navigateur.

Bien que la plus grande fonctionnalité ici soit l'utilisation de flexbox pour formater les colonnes du tableau. Cet exemple prouve que flexbox est l'avenir des sites Web réactifs.

Voir le plan tarifaire Pen Flexbox de Lindsey