CSS3 pricing table

December 12, 2011 by Catalin Rosu - 41 comments

When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs needs.

So, in this article you’ll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup.

View demo

If you’re in a hurry, just check the final result.

The HTML

Here’s a markup excerpt with the Enterprise section:

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="">Sign up</a>         
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
	    <li><b>Unlimited</b> subdomains</li>			
        </ul> 
    </div>
    ...
</div>

The CSS

Keep your CSS as simple as possible:

	
#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 892px; /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);        
	background: #fff;      
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
	float: left;
	position: relative;
}

#pricing-table #most-popular {
	z-index: 2;
	top: -13px;
	border-width: 3px;
	padding: 30px 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
}

#pricing-table .plan:nth-child(1) {
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;        
}

#pricing-table .plan:nth-child(4) {
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;        
}

/* --------------- */	

#pricing-table h3 {
	font-size: 20px;
	font-weight: normal;
	padding: 20px;
	margin: -20px -20px 50px -20px;
	background-color: #eee;
	background-image: -moz-linear-gradient(#fff,#eee);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
	background-image: -webkit-linear-gradient(#fff, #eee);
	background-image: -o-linear-gradient(#fff, #eee);
	background-image: -ms-linear-gradient(#fff, #eee);
	background-image: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
	background-color: #ddd;
	background-image: -moz-linear-gradient(#eee,#ddd);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));    
	background-image: -webkit-linear-gradient(#eee, #ddd);
	background-image: -o-linear-gradient(#eee, #ddd);
	background-image: -ms-linear-gradient(#eee, #ddd);
	background-image: linear-gradient(#eee, #ddd);
	margin-top: -30px;
	padding-top: 30px;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0; 		
}

#pricing-table .plan:nth-child(1) h3 {
	-moz-border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	border-radius: 5px 0 0 0;       
}

#pricing-table .plan:nth-child(4) h3 {
	-moz-border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;       
}	

#pricing-table h3 span {
	display: block;
	font: bold 25px/100px Georgia, Serif;
	color: #777;
	background: #fff;
	border: 5px solid #fff;
	height: 100px;
	width: 100px;
	margin: 10px auto -65px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
}

#pricing-table li {
	border-top: 1px solid #ddd;
	padding: 10px 0;
}

/* --------------- */
	
#pricing-table .signup {
	position: relative;
	padding: 8px 20px;
	margin: 20px 0 0 0;  
	color: #fff;
	font: bold 14px Arial, Helvetica;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;       
	background-color: #72ce3f;
	background-image: -moz-linear-gradient(#72ce3f, #62bc30);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));    
	background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
	background-image: -o-linear-gradient(#72ce3f, #62bc30);
	background-image: -ms-linear-gradient(#72ce3f, #62bc30);
	background-image: linear-gradient(#72ce3f, #62bc30);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;     
	text-shadow: 0 1px 0 rgba(0,0,0,.3);        
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#pricing-table .signup:hover {
	background-color: #62bc30;
	background-image: -moz-linear-gradient(#62bc30, #72ce3f);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));      
	background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
	background-image: -o-linear-gradient(#62bc30, #72ce3f);
	background-image: -ms-linear-gradient(#62bc30, #72ce3f);
	background-image: linear-gradient(#62bc30, #72ce3f); 
}

#pricing-table .signup:active, #pricing-table .signup:focus {
	background: #62bc30;       
	top: 2px;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; 
}

/* --------------- */

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}

.clear {
  zoom:1
}

So, why should I use this pricing table design?

While its structure isn’t actually based on tables, here are some pros:

Minimal HTML code.
No images at all and CSS3 ready, so this is easy to maintain/update.
Graceful degradation for older browsers.

Internet Explorer 8 – preview

View demo

Conclusion

For this CSS3 pricing table, I tried to follow some best practices as:

Highlighting a recommended plan.
Making the price stand out.
Placing the plans in a descending order.

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

If you enjoyed this article, get updates via RSS or email (it's free).

41 thoughts on “CSS3 pricing table”

Fanny Mae on December 12, 2011 at 11:27 said:

Hello,
I was eager to read your new trick and tip.
Simplicity, efficiency. Very nice. Indeed, HTML code is an “empty void” ;-)
Thank you for sharing.
Reply ↓
- Red on December 12, 2011 at 15:13 said:
  
  Fanny Mae, thanks for your kind words.
  Reply ↓
sinan on December 12, 2011 at 12:11 said:

your shares are very simple and nice.
i follow your site.
i like it.
Reply ↓
- Red on December 12, 2011 at 15:14 said:
  
  Hi Sinan, thank you. I’m glad you like my tutorials.
  Reply ↓
Edin on December 12, 2011 at 15:11 said:

You share some really amazing stuff with us, thanks a lot. Became a fan!
Reply ↓
- Red on December 12, 2011 at 15:15 said:
  
  Edin, thanks a lot for your comment.
  Reply ↓
Mark on December 12, 2011 at 16:59 said:

Nice article, thanks for sharing your source code!
Reply ↓
- Red on December 12, 2011 at 17:04 said:
  
  Hi Mark, thank you also for your comment.
  Reply ↓
Ching on December 14, 2011 at 05:55 said:

GGG = A Great Genuine Guru makes thing simple but nice.
You are GGG,thank you.
Reply ↓
- Red on December 14, 2011 at 09:55 said:
  
  Thanks a lot, I really appreciate!
  Reply ↓
Rob on December 14, 2011 at 20:28 said:

This is great – thanks for sharing. As it happens I am designing a pricing table for a project I’m currently working on. This tutorial will be a big help!
Reply ↓
- Red on December 14, 2011 at 23:25 said:
  
  Nice to hear that Rob, thanks for your comment.
  Reply ↓
Derek on December 15, 2011 at 05:24 said:

+1 for not using tables! :D
Reply ↓
- Red on December 27, 2011 at 01:11 said:
  
  Derek, I’m glad you like it!
  Reply ↓
Testing-G on December 27, 2011 at 01:08 said:

Excellent, you’re the best catalin ! ;o)
Reply ↓
- Red on December 27, 2011 at 01:10 said:
  
  Thanks for your comment!
  Reply ↓
Yuneekguy on December 29, 2011 at 14:02 said:

You always leave your readers looking forward to your next work. Very nice work here. The fact that it degrades gracefully is really cool. Keep it up Catalin. You are making many people better at what they do by sharing your great pieces than you might probably know. Thanks for sharing.
Reply ↓
книги онлайн on January 2, 2012 at 09:24 said:

Exellent tutorials you publish here! Keep doing it, I will continue to follow it.
Reply ↓
Samuel Guebo on January 27, 2012 at 19:37 said:

Thx for sharing! Brilliant tutorial by the way
Reply ↓
Red on January 28, 2012 at 16:03 said:

I’m very happy you like this, thank you all for your comments!
Reply ↓
lee herrod on February 8, 2012 at 03:58 said:

Hi red,
love this price table. I`am new to html and css.
I have inserted the codes and everything looks fine apart from the columns, I can not seem to line them up , they line up in a list , one under each other.
and not side by side.
hope you can help.
thanks lee
Reply ↓
Bandung Trip on February 26, 2012 at 03:10 said:

Hi Red, nice trick, i love it, i’ll follow ur blog :)
btw, i want to know if this trick can be used on wordpress..
sorry, i’m newbie here :)
Reply ↓
Sonu on February 29, 2012 at 00:11 said:

Damn! You are just epic. Awesome CSS3 tweaks. Its been almost a week and I’m regularly following your blog.
Reply ↓
Steini on April 13, 2012 at 04:11 said:

Would be nice if you wrote a tutorial on this subject, so one could learn step by step why this and why that. The creation process :)
Reply ↓
- Red on April 13, 2012 at 09:30 said:
  
  Thanks for your feedback, I’ll do that for my next pricing table article. ;)
  Reply ↓
expresnt on April 15, 2012 at 14:59 said:

I’m very happy for sharing your source codeRed.
thanks .
Reply ↓
feathersdesigns on April 18, 2012 at 08:23 said:

nice stuff!
Reply ↓
awan on June 24, 2012 at 14:35 said:

Heyyyyyyyyyy Brotherrrrrrrrrrrr Thanx :D your tutorials Very Very Helping Me ,,
and let me copu your Creation :D
thanx very Much ..
Best Rehards yah :D
Pricing Tables From you :D yeeeeeeeahhhhh
Reply ↓
Michael Storzieri on June 24, 2012 at 22:10 said:

Good article on pricing tables and how to use minimal css to create them. Thank you!
Reply ↓
Entrepreneur on July 31, 2012 at 00:12 said:

Thanks for the Tutorial it help me in my project which required that type of work.
Reply ↓
Justin on September 27, 2012 at 00:34 said:

thanks! how would i implement this into Joomla?
Reply ↓
Shim on September 27, 2012 at 01:05 said:

Thank you, that is really helpfull
Reply ↓
TeriYeri on December 3, 2012 at 19:31 said:

Many thanks for this simple yet stylish pricing list. Saves me a good hour or two writing it myself!
Reply ↓
Arthur on December 12, 2012 at 21:12 said:

Thanks for sharing it!!!
I love it!
Reply ↓
Brett Bissell on February 23, 2013 at 16:32 said:

Hello, love the look of this and want it. Hoping you could help me out here with a what is probably a basic question I suppose for most. I am only able to get the enterprise to show up properly on my site page. When I copy/paste the enterprise to create the professional and standard they show up staggered declining downward. Any suggestions of what code would look like for as you have it displayed would be awesome. Thank you,
Brett
Reply ↓
- Catalin Rosu on February 23, 2013 at 19:34 said:
  
  Brett, that’s because you copied only the excerpt found in this article. Use the demo page source in order to copy the whole markup.
  Good luck!
  Reply ↓
  - Brett on February 24, 2013 at 07:42 said:
    
    Thank you for your reply. I guess I am too new to this to figure it out. The link you provided shows the full functioning template but I don’t see the code to copy.
    Appreciate any help you are able to give.
    Have a good one and thanks again.
    Reply ↓
Daniel on March 11, 2013 at 07:15 said:

Thanks man!
Reply ↓
Karan Menon on March 28, 2013 at 04:12 said:

amazing tutorial :)
Reply ↓
Sean Nelson on April 13, 2013 at 17:57 said:

Very Nice pricing table. Have you thought of doing a Responsive pricing table version?
I played with converting #pricing-table width to 100% and .class width (I’m using a 3 price version) to 25%.
On iPhone smaller not quite there but that may be because I need to add some revised css based on device size to stack the boxes.
Thanks.
Reply ↓
- Catalin Rosu on April 14, 2013 at 21:26 said:
  
  Sean, I already had this in mind for a future article. Thanks for your suggestion! ;)
  Reply ↓