Html Code: Pricing table

A nice table designed for the websites that have something for purchasing.
This table shows an outstanding column and make it interesting for user.
Design by html and css3.
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
<style>
/*Basic Reset*/
* {margin: 0; padding: 0;}

.pricing_table {
	width: 600px; 
	color: #fff;
	font-size: 12px;
	font-family: Ubuntu, arial, verdana;
	line-height: 150%;
	text-align: center;
	margin: 10px auto 0 auto;
}
/*Only the direct LI child, not the .features li*/
.pricing_table>li {
	background: linear-gradient(#666, #333);
	width: 33.33%;
	float: left;
	list-style-type: none;
	/*For smooth hover effects if .active is replaced by :hover*/
	transition: all 0.2s;
}
.pricing_table>li.active {
	background: linear-gradient(#F9B84A, #DB7224);
	transform: scale(1.03);
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
}
.pricing_table h3 {
	text-transform: uppercase;
	padding: 15px 0;
	font-size: 14px;
	font-weight: bold;
}
.pricing_table .price_body {
	width: 125px;
	height: 125px;
	margin: 0 auto 15px auto;
	border: 2px solid #fff;
	border-radius: 100%;
	display: table;
}
.pricing_table .price {
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	/*Lets vertically center align the price now*/
	vertical-align: middle;
	display: table-cell;
}
.pricing_table .price .price_figure {
	display: block;
}
.pricing_table .price .price_term {
	font-size: 11px;
	font-weight: normal;
}

.pricing_table .features li {
	list-style-type: none;
	padding: 5px 0;
}

.pricing_table .footer {
	padding: 10px;
	background: #333;
	margin-top: 10px;
}
.pricing_table .footer .action_button{
	color: #fff;
	font-size: 11px;
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	background: #000;
	padding: 4px 20px;
	border-radius: 15px;
	background: linear-gradient(#666, #333);
}
.pricing_table li.active .footer .action_button {
	background: linear-gradient(#F9B84A, #DB7224);
}
.clr {clear: both;}
</style>
</head>
<body>
<ul class="pricing_table">
	<li>
		<h3>Starter</h3>
		<div class="price_body">
			<div class="price">
				Free
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>5 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>2 months</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="action_button">Get Started</a>
		</div>
	</li>
	<!-- Active/Hover styles -->
	<li class="active">
		<h3>Basic</h3>
		<div class="price_body">
			<div class="price">
				<span class="price_figure">$24</span>
				<span class="price_term">per month</span>
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>20 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>6 months</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="action_button">Get Started</a>
		</div>
	</li>
	<li>
		<h3>Premium</h3>
		<div class="price_body">
			<div class="price">
				<span class="price_figure">$49</span>
				<span class="price_term">per month</span>
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>50 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>Lifetime</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="action_button">Get Started</a>
		</div>
	</li>
	<!-- To prevent .pricing_table height collapse(as its children are floated) -->
	<div class="clr"></div>
</ul>
<div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html>
If you don't know how to use this code or need more information Click here!
Compatible browsers:
Html Best Codes

Html Code: Pricing table

Review

Links
