How to create pure css3 pricing table
Today i will present you how to create amazing css3 pricing table,
This table will be create with html list, i dont like to work with table i preffer lists. So lets go to work
First you need to write html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="core.css">
<title>CSS3 Pricing Table - Demo</title>
</head>
<body>
<section class="container">
<div class="pricing_table">
<ul>
<li>Standard</li>
<li>£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>£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>£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>£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>
<ul>
<li>Maximum</li>
<li>£120</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>
<br style="clear:both;" />
</body>
</html>
Now we need to write css code and our project is finished
.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 {
border-bottom:1px dashed #cfd2d2;
padding:10px 0;
}
.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;
}
