Hello Reader, 

In this blog I am going to tell you how to create Pricing Table using CSS3. It includes features like : transforms, gradient, shadow and nth-child. 

Go to the link below and hover your mouse over the price table to see the CSS animation in action.

https://jsfiddle.net/a0f7ugo2/1/

HTML :-  The HTML for the table is in reality not a table yet I prefer not working with tables. The information that should be shown can be better composed by utilizing a list this is because the information can split into columns to be displayed to the visitor.

<div class="pricing_table">
		<ul>
			<li>Standard</li>
			<li>&pound;20</li>
			<li>Perfect for those getting started with our app.</li>
			<li>15 Projects</li>
			<li>5GB Storage</li>
			<li>Unlimited Users</li>
			<li>No Time Tracking</li>
			<li>Enchaned Security</li>
			<li></li>
			<li><a href="" class="buy_now">Buy Now</a></li>
		</ul>
		
		<ul>
			<li>Premium</li>
			<li>&pound;60</li>
			<li>Perfect for those getting started with our app.</li>
			<li>15 Projects</li>
			<li>5GB Storage</li>
			<li>Unlimited Users</li>
			<li>No Time Tracking</li>
			<li>Enchaned Security</li>
			<li></li>
			<li><a href="" class="buy_now">Buy Now</a></li>
		</ul>
		
		<ul>
			<li>Professional</li>
			<li>&pound;80</li>
			<li>Perfect for those getting started with our app.</li>
			<li>15 Projects</li>
			<li>5GB Storage</li>
			<li>Unlimited Users</li>
			<li>No Time Tracking</li>
			<li>Enchaned Security</li>
			<li></li>
			<li><a href="" class="buy_now">Buy Now</a></li>
		</ul>
		
		<ul>
			<li>Plus</li>
			<li>&pound;100</li>
			<li>Perfect for those getting started with our app.</li>
			<li>15 Projects</li>
			<li>5GB Storage</li>
			<li>Unlimited Users</li>
			<li>No Time Tracking</li>
			<li>Enchaned Security</li>
			<li></li>
			<li><a href="" class="buy_now">Buy Now</a></li>
		</ul>
		
	
</div>

CSS :- 

.pricing_table {  
	border:1px solid #c4cbcc;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	outline:7px solid #f2f3f3;
	float:left;
}

.pricing_table ul { 
	list-style:none; 
	float:left; 
	width:147px; 
	margin:0; 
	border:1px solid #f2f3f3;
	padding:5px;
	text-align:center;
	background-color:#FFF;
}

.pricing_table 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;
}

.pricing_table ul li:first-child { 
	font-size:18px;
	font-weight:bold;
}
.pricing_table ul li:nth-child(2) { 
	background:#fbfbfb;
}
.pricing_table ul li:nth-child(3) { 
	font-size:12px;
	font-weight:bold;
}
.pricing_table ul li:nth-child(n+4) { 
	font-size:14px;
}
.pricing_table ul li:last-child a { 
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border:1px solid #c4cbcc;
	padding:10px;
	margin:5px 0;
	background: #e5e696; /* Old browsers */
	background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #e5e696 0%,#d1d360 100%); /* W3C */
	color:#000;
	font-style:italic;
	display:block;
}