10 Free CSS Snippets for Creating Responsive Pricing Tables
The pricing page is a staple for any online shop. It’s used for SaaS products, service companies, and eCommerce shops all around the web.
And no pricing page would be complete without a pricing table comparing options, features, and (naturally) prices. But designing your own from scratch can be a hassle.
That’s where these open source pricing tables can help. These are all fully responsive, and they work great as templates whether you’re looking to customize your own or just reuse existing code to save time.
1. Icon Table by Travis Williamson
Great visuals always sell. These might be product photos or custom illustrations but visuals grab attention faster than text.
This iconified pricing table is an excellent example of what’s possible with visual table columns. By adding icons, you can inform customers what they’re getting with each package before they even read anything. The icons showcase varying power and features. The smallest plan has a paper airplane, while the largest plan uses a full rocket ship. Talk about contrast!
See the Pen
Pricing Table by Travis Williamson (@travisw)
2. Zebra Striping w/ Colors by Agustin Ortiz
This example has a much simpler pricing table and follows more conventional design rules. It uses zebra striping, large pricing headers, and various colors to help one specific pricing format stand out from the rest.
The colors can feel a little strong, so it’s not perfect for every layout. But you can easily change the colors and still keep the same format to get this pricing table working on your own site.
See the Pen Pricing Table | Tabla de Precios by Agustin Ortiz
3. Dark Purple Table by Mike Torosian
For a darker and richer table design, check out this purple pricing table. It uses background gradients, and border hover effects to create one of the most professional pricing tables on the web. It’s also fully responsive, so the table elements break down into rows as the browser gets smaller.
See the Pen Pricing Table by Mike Torosian
4. Professional Pricing by LittleSnippets
B2B websites often look for more professional designs that edge away from creative color schemes and extraneous icons. This pricing design is one such example following a typical color scheme of dark and light shades.
One pricing column uses a dark blue highlight to jump out from the rest of the table. It’s standard practice to follow this technique since it can lead to a higher conversion rate. That’s why the “professional” plan also uses a drop shadow to appear on top of the other columns. But when resized down smaller, it falls into a stack formation for easier browsing.
See the Pen #1214 – Pricing table by LittleSnippets
5. Table With Hover Effects by Nidheesh Balachandran
In this pricing table design, you’ll find some gorgeous hover effects that add color to the darkened table headers. They each leave room for a background image of your choice, and the hover effect is managed via CSS.
One other thing I like is the click event tied to the entire table column. This way, if a visitor clicks anywhere on the column, it’ll take them directly to the relevant signup page.
See the Pen Pricing table by Nidheesh Balachandran
6. Bootstrap Pricing Tables by Sahar Ali Raza
I’m a huge fan of Bootstrap since there’s so much you can do with the framework, and its related themes. One such example is this pricing table example.
A lot of this design is custom coded, including the slanted header backgrounds and the hover animations. But the overall layout relies on Bootstrap, which makes it fully responsive by default. The typography is stunning, and I also love the hover animations while moving over each row. This is a clean table design that could work for almost any type of website.
See the Pen Bootstrap Pricing Table by Sahar Ali Raza
7. Material Design Pricing Table by Morten Sørensen
If you like Google’s material design then you’ll definitely like this pricing table. It’s a material UI table following many of Google’s suggested features like drop shadow hovers and flat color schemes.
See the Pen
Material Design Pricing Tables (flexbox) by Morten Sørensen.
8. Clean and Simple Pricing Table by Daniel Hearn
Super clean and lightweight best describes this white pricing table. It doesn’t rely on many colors or fancy features to stand out. Instead, it uses gray for the headers and black/white for the text contrast. This actually works well since the CTA buttons keep a strong green outline effect.
When you reduce color in a table, you draw attention to the only areas with color, and this usually encourages more clicks. Since this is pure CSS, you’ll have an easy time updating the button color to suit your design.
See the Pen Pricing Table -1 by Daniel Hearn
9. WIP Tables by Dylan Mcleod
For a work in progress, I have to say this colorful pricing table set looks incredible. It follows many traditional techniques like highlighting the table headers and keeping one column larger than the others.
But I’m most impressed with the varying color choices that blend so well together. It’s almost like these tables have a few different headers, and they all grab your attention for various reasons.
See the Pen Pricing Tables by Dylan Mcleod
10. Flexbox Pricing Tale by CSSGirl
Now, for a real forward-facing table design, check out this flexbox table. When mousing over the table, each column grows a bit larger and increases the background color. This helps the column stand out from the rest and grab attention faster. It’s a nice effect that carries over to the table’s CSS transitions while resizing the browser.
Although the biggest feature here is the use of flexbox to format the table columns. This example proves that flexbox is the future of responsive websites.
See the Pen Flexbox Pricing Plan by Lindsey
The post 10 Free CSS Snippets for Creating Responsive Pricing Tables appeared first on Speckyboy Design Magazine.