10 fragmentos de CSS gratuitos para crear tablas de precios adaptables

La página de precios es un elemento básico para cualquier tienda en línea. Se utiliza para productos SaaS, empresas de servicios y tiendas de comercio electrónico en toda la web.

Y ninguna página de precios estaría completa sin una tabla de precios que compare opciones, características y (naturalmente) precios. Pero diseñar uno propio desde cero puede ser una molestia.

Ahí es donde estas tablas de precios de código abierto pueden ayudar. Todos estos son totalmente receptivos y funcionan muy bien como plantillas, ya sea que esté buscando personalizar el suyo propio o simplemente reutilizar el código existente para ahorrar tiempo.

1. Mesa de íconos de Travis Williamson

Las grandes imágenes siempre venden. Estas pueden ser fotos de productos o ilustraciones personalizadas, pero las imágenes captan la atención más rápido que el texto.

Esta tabla de precios iconificada es un excelente ejemplo de lo que es posible con las columnas de tablas visuales. Al agregar íconos, puede informar a los clientes lo que obtienen con cada paquete incluso antes de que lean algo. Los íconos muestran diferentes potencias y características. El plan más pequeño tiene un avión de papel, mientras que el plan más grande usa un cohete completo. ¡Hablando de contraste!

ver la pluma
Tabla de precios por Travis Williamson (@travisw)

2. Rayas de cebra con colores por Agustin Ortiz

Este ejemplo tiene una tabla de precios mucho más simple y sigue reglas de diseño más convencionales. Utiliza rayas de cebra, encabezados de precios grandes y varios colores para ayudar a que un formato de precios específico se destaque del resto.

Los colores pueden sentirse un poco fuertes, por lo que no es perfecto para todos los diseños. Pero puede cambiar fácilmente los colores y mantener el mismo formato para que esta tabla de precios funcione en su propio sitio.

Consulte la tabla de precios de bolígrafos | Tabla de Precios de Agustín Ortiz

3. Mesa morada oscura de Mike Torosian

Para un diseño de mesa más oscuro y rico, consulte esta tabla de precios morada. Utiliza degradados de fondo y efectos de desplazamiento de borde para crear una de las tablas de precios más profesionales de la web. También responde completamente, por lo que los elementos de la tabla se dividen en filas a medida que el navegador se hace más pequeño.

Consulte la tabla de precios de bolígrafos de Mike Torosian

4. Precios profesionales de LittleSnippets

Los sitios web B2B a menudo buscan diseños más profesionales que se alejen de los esquemas de color creativos y los iconos extraños. Este diseño de precios es uno de esos ejemplos que sigue un esquema de color típico de tonos oscuros y claros.

Una columna de precios utiliza un resaltado azul oscuro para destacarse del resto de la tabla. Es una práctica estándar seguir esta técnica, ya que puede conducir a una tasa de conversión más alta. Es por eso que el plan "profesional" también usa una sombra paralela para aparecer encima de las otras columnas. Pero cuando se redimensiona más pequeño, cae en una formación de pila para facilitar la navegación.

Ver el Pen #1214 – Tabla de precios de LittleSnippets

5. Mesa con efectos de desplazamiento por Nidheesh Balachandran

En este diseño de tabla de precios, encontrará algunos magníficos efectos de desplazamiento que agregan color a los encabezados de tabla oscurecidos. Cada uno de ellos deja espacio para una imagen de fondo de su elección, y el efecto de desplazamiento se gestiona a través de CSS.

Otra cosa que me gusta es el evento de clic vinculado a toda la columna de la tabla. De esta forma, si un visitante hace clic en cualquier parte de la columna, lo llevará directamente a la página de registro correspondiente.

Consulte la tabla de precios de bolígrafos de Nidheesh Balachandran

6. Tablas de precios Bootstrap por Sahar Ali Raza

Soy un gran admirador de Bootstrap ya que hay mucho que puedes hacer con el marco y sus temas relacionados. Un ejemplo de ello es este ejemplo de tabla de precios.

Gran parte de este diseño está codificado a medida, incluidos los fondos de encabezado inclinados y las animaciones flotantes. Pero el diseño general se basa en Bootstrap, lo que lo hace totalmente receptivo de forma predeterminada. La tipografía es impresionante, y también me encantan las animaciones flotantes mientras me muevo sobre cada fila. Este es un diseño de tabla limpio que podría funcionar para casi cualquier tipo de sitio web.

Consulte la tabla de precios de Pen Bootstrap de Sahar Ali Raza

7. Tabla de precios de diseño de materiales de Morten Srensen

Si te gusta el diseño de materiales de Google, definitivamente te gustará esta tabla de precios. Es una tabla de interfaz de usuario de material que sigue muchas de las funciones sugeridas por Google, como sombras flotantes y esquemas de colores planos.

ver la pluma
Tablas de precios de diseño de materiales (flexbox) de Morten Srensen.

8. Tabla de precios limpia y simple por Daniel Hearn

Súper limpio y liviano describe mejor esta tabla de precios blanca. No depende de muchos colores o características sofisticadas para destacar. En cambio, usa gris para los encabezados y blanco y negro para el contraste del texto. Esto realmente funciona bien ya que los botones CTA mantienen un fuerte efecto de contorno verde.

Cuando reduce el color en una tabla, llama la atención sobre las únicas áreas con color, y esto generalmente fomenta más clics. Dado que se trata de CSS puro, le resultará fácil actualizar el color del botón para que se adapte a su diseño.

Ver la tabla de precios de bolígrafos -1 por Daniel Hearn

9. Tablas WIP de Dylan Mcleod

Para un trabajo en progreso, debo decir que este colorido conjunto de tablas de precios se ve increíble. Sigue muchas técnicas tradicionales como resaltar los encabezados de las tablas y mantener una columna más grande que las demás.

Pero estoy más impresionado con las diferentes opciones de color que combinan tan bien. Es casi como si estas tablas tuvieran algunos encabezados diferentes, y todos llaman su atención por varias razones.

Vea las tablas de precios de bolígrafos de Dylan Mcleod

10. Cuento de precios de Flexbox por CSSGirl

Ahora, para un diseño de mesa real orientado hacia adelante, echa un vistazo a esta mesa flexbox. Al pasar el mouse sobre la tabla, cada columna crece un poco más y aumenta el color de fondo. Esto ayuda a que la columna se destaque del resto y capte la atención más rápido. Es un buen efecto que se traslada a las transiciones CSS de la tabla al cambiar el tamaño del navegador.

Aunque la característica más importante aquí es el uso de flexbox para formatear las columnas de la tabla. Este ejemplo demuestra que flexbox es el futuro de los sitios web receptivos.

Vea el plan de precios Pen Flexbox de Lindsey