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 定價計劃