Pricing Table design is very important when it comes to compare products online. Today here I am going to tell how to create a stunning pricing table using css.

Free Pricing Table

Free Pricing Table with CSS

CSS Code

.pricing-table-wrapper {
margin: 16px 0;
text-align:center;
}
.pricing-table {
display:inline-block;
}
.pricing-column {
list-style:none;
margin:0 1px 0 0;
padding:0;
float:left;
position:relative;
-webkit-transition:0.3s;
-moz-transition:0.3s;
transition:0.3s;
}
.pricing-column:hover {
-webkit-box-shadow:0 0 50px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow:0 0 50px 0 rgba(0, 0, 0, 0.4);
box-shadow:0 0 50px 0 rgba(0, 0, 0, 0.4);
z-index:1;
}
.pricing-column li {
white-space:nowrap;
text-align:center;
padding:12px;
background:rgba(0, 0, 0, 0.01);
border-bottom:1px dotted rgba(0, 0, 0, 0.1);
}
.pricing-column li:nth-child(even) {
background:#f5f5f5;
background:rgba(0, 0, 0, 0.03);
}
.pricing-column li.pricing-title {
font-weight:bold;
font-size:110%;
border-top-width:3px;
border-top-style:solid;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.04)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
}
.pricing-column li.pricing-price {
color:#fff;
font-size:200%;
line-height:120%;
}
.pricing-column .price-comment {
font-size:45%;
line-height:120%;
}
.pricing-column .pricing-button .button {
margin:0;
}
.button, a.button {
display: inline-block;
border: 0 !important;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
background-image: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
line-height: 18px;
padding: 7px 10px;
margin: 0 5px 12px 0;
-webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s;
-moz-transition: background-color 0.3s, -moz-box-shadow 0.3s;
-ms-transition: background-color 0.3s, box-shadow 0.3s;
-o-transition: background-color 0.3s, box-shadow 0.3s;
transition: background-color 0.3s, box-shadow 0.3s;
text-decoration: none;

-webkit-box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.3), 0 6px 0 -3px rgba(0,0,0,0.15);
-moz-box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.3), 0 6px 0 -3px rgba(0,0,0,0.15);
box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.3), 0 6px 0 -3px rgba(0,0,0,0.15);
}
.button.text-bright, a.button.text-bright {
/*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);*/
}
.button.single-color:hover, a.button.single-color:hover {
background-image: none;
-webkit-box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.3), 0 6px 0 -3px rgba(0,0,0,0.15), 0 1000px 0 rgba(255,255,255,0.2);
-moz-box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.3), 0 6px 0 -3px rgba(0,0,0,0.15), 0 1000px 0 rgba(255,255,255,0.2);
box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.3), 0 6px 0 -3px rgba(0,0,0,0.15), inset 0 1000px 0 rgba(255,255,255,0.2);
}
.pricing-column li.pricing-title,
.pricing-column li.pricing-price
{
font-family:'Lato';
}
#sc_button_1, #sc_button_2, #sc_button_3{color:#ffffff !important}

CSS Code to Change Pricing Table Color

Just replace #2DA0CE with your color code

ul.pricing-column li.pricing-price {
	background-color:#2DA0CE;
}
li a.button.active
{
	background-color:#2DA0CE;
}
.button, a.button
{
	background-color:#2DA0CE !important;
}
.pricing-column li.pricing-title
{
	border-top-color:#2DA0CE;
}

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Live Demo & Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/01/free-pricing-table-design-css3.pnghttp://w3lessons.info/wp-content/uploads/2013/01/free-pricing-table-design-css3-150x150.pngKarthikeyan KCSS3FreebiesCSS3,pricing table
Pricing Table design is very important when it comes to compare products online. Today here I am going to tell how to create a stunning pricing table using css.CSS CodeCSS Code to Change Pricing Table Color Just replace #2DA0CE with your color codePlease don’t forget to share and subscribe to...