10 个用于创建响应式定价表的免费 CSS 代码段

已发表: 2021-10-14

定价页面是任何在线商店的主要内容。它用于网络上的 SaaS 产品、服务公司和电子商务商店。

如果没有比较选项、功能和（自然）价格的定价表，任何定价页面都是不完整的。但是从头开始设计自己的可能会很麻烦。

这就是这些开源定价表可以提供帮助的地方。这些都是完全响应的，无论您是要自定义自己的模板还是只是重用现有代码以节省时间，它们都可以很好地用作模板。

1. Travis Williamson 的图标表

出色的视觉效果总是很畅销。这些可能是产品照片或自定义插图，但视觉效果比文字更能吸引注意力。

这个图标化的定价表是可视化表格列的一个很好的例子。通过添加图标，您可以在客户阅读任何内容之前告知他们每个包裹的内容。这些图标展示了不同的功能和功能。最小的计划有一架纸飞机，而最大的计划使用一艘完整的火箭飞船。谈论对比！

见笔
Travis Williamson (@travisw) 的定价表

这个例子有一个更简单的定价表，并遵循更传统的设计规则。它使用斑马条纹、大定价标题和各种颜色来帮助一种特定的定价格式从其他格式中脱颖而出。

颜色会感觉有点强烈，所以它并不适合每种布局。但是您可以轻松更改颜色并保持相同的格式，以便在您自己的网站上使用此定价表。

请参阅钢笔定价表 | 奥古斯丁·奥尔蒂斯（Agustin Ortiz）的Tabla de Precios

如需更深、更丰富的表格设计，请查看此紫色定价表。它使用背景渐变和边框悬停效果来创建网络上最专业的定价表之一。它也是完全响应的，因此随着浏览器变小，表格元素会分解成行。

请参阅 Mike Torosian 的钢笔定价表

B2B 网站通常会寻找远离创意配色方案和无关图标的更专业的设计。这种定价设计就是一个这样的例子，它遵循典型的深色和浅色色调配色方案。

一个定价列使用深蓝色突出显示从表格的其余部分跳出。遵循这种技术是标准做法，因为它可以带来更高的转化率。这就是为什么“专业”计划还使用阴影出现在其他列的顶部。但是当缩小尺寸时，它会落入堆栈形式以便于浏览。

请参阅钢笔 #1214 – LittleSnippets 的定价表

在这个定价表设计中，您会发现一些华丽的悬停效果，为变暗的表格标题添加颜色。它们每个都为您选择的背景图像留出空间，并且悬停效果是通过 CSS 管理的。

我喜欢的另一件事是与整个表格列相关的点击事件。这样，如果访问者单击列上的任何位置，它会将他们直接带到相关的注册页面。

查看 Nidheesh Balachandran 的钢笔定价表

我是 Bootstrap 的忠实粉丝，因为您可以使用该框架及其相关主题做很多事情。一个这样的例子是这个定价表例子。

很多这种设计都是自定义编码的，包括倾斜的标题背景和悬停动画。但整体布局依赖于 Bootstrap，默认情况下是完全响应式的。排版令人惊叹，我也喜欢在每一行上移动时的悬停动画。这是一个干净的表格设计，几乎适用于任何类型的网站。

请参阅 Sahar Ali Raza 的 Pen Bootstrap 定价表

如果您喜欢 Google 的材料设计，那么您一定会喜欢这个定价表。这是一个材质 UI 表，遵循 Google 建议的许多功能，如阴影悬停和平面配色方案。

见笔
Morten Srensen 的 Material Design 定价表 (flexbox)。

超级干净和轻量级最好地描述了这个白色的定价表。它不依赖于许多颜色或花哨的功能来脱颖而出。相反，它使用灰色作为标题，使用黑色/白色作为文本对比。这实际上效果很好，因为 CTA 按钮保持强烈的绿色轮廓效果。

当您减少表格中的颜色时，您会将注意力吸引到唯一有颜色的区域，这通常会鼓励更多点击。由于这是纯 CSS，您可以轻松地更新按钮颜色以适应您的设计。

请参阅 Daniel Hearn 的钢笔定价表 -1

对于正在进行的工作，我不得不说这个色彩缤纷的定价表看起来令人难以置信。它遵循许多传统技术，例如突出显示表格标题并保持一列比其他列大。

但最让我印象深刻的是各种颜色选择融合得如此之好。几乎就像这些表格有几个不同的标题一样，它们都因为各种原因引起了你的注意。

请参阅 Dylan Mcleod 的钢笔定价表

现在，对于真正的前向表设计，请查看这个 flexbox 表。将鼠标悬停在表格上时，每列都会变大一点并增加背景颜色。这有助于该专栏从其他专栏中脱颖而出并更快地吸引注意力。这是一个很好的效果，可以在调整浏览器大小时延续到表格的 CSS 过渡。

虽然这里最大的特点是使用 flexbox 来格式化表格列。这个例子证明了 flexbox 是响应式网站的未来。

查看 Lindsey 的 Pen Flexbox 定价计划