CSS3_Table

Free CSS3 Pricing Table

During selling a product or service online, Your company pricing plan is a not simply a portal the user has to click through to purchase their item. An effective CSS3 Pricing Table allows you to represent your company product easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs requirements.

In this tutorial,We will create effect & slick CSS3 Pricing Table.

During selling a product or service online, Your company pricing plan is a not simply a portal the user has to click through to purchase their item. An effective CSS3 Pricing Table allows you to represent your company product easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs requirements.

In this tutorial,We will create effect & slick CSS3 Pricing Table.

Our final product will look like this image. (Looking Awesome … )

CSS3_Table

DEMO                                          


Tweet&getit is powered by Viuu

 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.









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                                          


Tweet&getit is powered by Viuu

No related posts.