WebDesignerGeeks – Web Designer, Web Developer blog -

 Step 1 : Create HTML5 table page

In this step, we will create a simple table with required product price & feature details. In our example I am hosting plans details pricing table. You can use it as you wish to list for your business product.

		Return To WebDesignerGeeks
	


CSS3 Pricing Table - Demo

Hover your mouse over the price table to see the CSS animation in action.


Standard
$20
Perfect for those getting started with our app.
15 Projects
5GB Storage
Unlimited Users
No Time Tracking
Enchaned Security

Buy Now


Premium
$60
Perfect for those getting started with our app.
15 Projects
5GB Storage
Unlimited Users
No Time Tracking
Enchaned Security

Buy Now


Professional
$80
Perfect for those getting started with our app.
15 Projects
5GB Storage
Unlimited Users
No Time Tracking
Enchaned Security

Buy Now


Plus
$100
Perfect for those getting started with our app.
15 Projects
5GB Storage
Unlimited Users
No Time Tracking
Enchaned Security

Buy Now


Maximum
$120
Perfect for those getting started with our app.
15 Projects
5GB Storage
Unlimited Users
No Time Tracking
Enchaned Security

Buy Now

[adsense]

Step 2 : Create CSS3 file

In this CSS3 file we  use of a whole bunch of new CSS3 features including : transforms, gradient, shadow and nth-child.

body
{
   font-family: sans-serif;

}

.pricing_table_wdg {
	border:1px solid #c4cbcc;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	float:left;
	margin-top: 25px;
}
.pricing_table_wdg ul {
	list-style:none;
	float:left;
	width:147px;
	margin:0;
	border:1px solid #f2f3f3;
	padding:5px;
	text-align:center;
	background-color:#FFF;
}
.pricing_table_wdg ul:hover {
	-webkit-transform: scale(1.1);
  	-moz-transform: scale(1.1);
  	-o-transform: scale(1.1);
  	-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
  	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
  	box-shadow:3px 5px 7px rgba(0,0,0,.7);
	cursor:pointer;
	background:#d8e9f9;
}
.pricing_table_wdg ul li {
	border-bottom:1px dashed #cfd2d2;
	padding:10px 0;
}
.pricing_table_wdg ul li:first-child {
	color:#FFFFFF;
	font-size:18px;
	font-weight:bold;
	background:#2e818f;
}
.pricing_table_wdg ul li:nth-child(2) {
	background:#fbfbfb;
}
.pricing_table_wdg ul li:nth-child(3) {
	font-size:12px;
	font-weight:bold;
}
.pricing_table_wdg ul li:nth-child(n+4) {
	font-size:14px;
}
.pricing_table_wdg ul li:last-child a {
	color:#F0F0F0;
	text-decoration:none;
	font-weight:bold;
	display:block;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border:1px solid #c4cbcc;
	padding:10px;
	margin:5px 0;
	background: #0061bb; /* Old browsers */
	background: -moz-linear-gradient(top, #0061bb 0%, #164e82 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0061bb), color-stop(100%,#164e82)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0061bb 0%,#164e82 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0061bb 0%,#164e82 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #0061bb 0%,#164e82 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0061bb', endColorstr='#164e82',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #0061bb 0%,#164e82 100%); /* W3C */
}

Hover your mouse over the price table to see the CSS3 animation in action. Check out live demo

DEMO