Pricing Table using CSS

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 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