Simple Table Pricing Using CSS

June 18th, 2012 by aditia rahman / 1 Comment  

     

In today post I want to create a simple table pricing using CSS only style, table pricing is one of the most common use in web design especially for web sites who offering different kind of product or service, for example we can found it on web hosting sites, commercial software support, online marketing consultant, etc.

css-table-pricing

In this example I use a sample dummy web hosting datam, for grid I use notjustgrid, to make easier dividing a div, and colorzilla gradient editor to creating a button gradient color. The other features and tool used in this example are google web fonts, css text shadow, rounded corner and box gradient.

Include CSS Grid and Google Fonts
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" media="screen" href="css/grid960.css" />
<link rel="stylesheet" type="text/css" href="css/type.css" />
<link rel="stylesheet" type="text/css" href="css/helpers.css" />
<link rel="stylesheet" type="text/css" href="css/ux.css" />
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed' rel='stylesheet' type='text/css'>
Full CSS Code
* {
	font-family: Arial, 'Free Sans' !important;
}
#container {
	padding: 40px 0;
}
.pricing_table {
	background-color: #fff !important;
	text-align: center;
	border-bottom: 2px solid #f3f3f3;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow:    0px 0px 5px 3px #e3e3e3 !important;
	-webkit-box-shadow: 0px 0px 5px 3px #e3e3e3 !important;
	box-shadow:         0px 0px 5px 3px #e3e3e3 !important;
}
.pricing_table:hover {
	border-bottom: 2px solid #d3d3d3;
}
.pricing_table div {
	background-color: #fff;
	border-bottom: 1px solid #e9e9e9;
	padding: 10px 0;
	font-size: 14px;
	color: #333;
}
.price_head {
	text-shadow: 1px 1px 1px #999;
	font-weight: bold;
	font-family: 'Cabin Condensed', sans-serif !important;
	letter-spacing: -1px;
	font-size: 28px !important;
	padding: 20px 0 !important;
	color: #fff !important;
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-radius: 7px 7px 0 0;
	border-radius: 7px 7px 0 0;
	background: #4096ee !important;
}
.price_div {
	padding-top: 20px !important;
}
.price_month {
	font-size: 38px !important;
	font-weight: bold;
	color: #4096ee;
	text-shadow: 1px 1px 1px #c3c3c3;
}
.price_button {
	padding: 20px 0 !important;
}
.bg_grey {
	background: #f3f3f3 !important;
}
.button {
	background-color: #0099cc;
	padding: 10px;
	color: #fff !important;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	text-shadow: 1px 1px 1px #999;
	background: rgb(157,213,58); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}
.button:hover {
	background: rgb(230,240,163); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,240,163,1)), color-stop(50%,rgba(210,230,56,1)), color-stop(51%,rgba(195,216,37,1)), color-stop(100%,rgba(219,240,67,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
Table Pricing in HTML
<div id="container">
<div class="pricing_table quarter">
	<div class="price_head">Personal Host</div>
	<div class="price_div"><span class="price_month">$2</span> / mo</div>
	<div>2 GB Storage</div>
	<div class="bg_grey"><b>50 GB Data Transfer</b></div>
	<div class="bg_grey"><b>Uptime 99.9%</b></div>
	<div>5 Domains</div>
	<div>Unlimited Sub Domains</div>
	<div class="price_button"><a href="" class="button">ORDER NOW</a></div>
</div>

<!-- make it others 3 -->

<div style="clear:both;margin: 5px 0;">&nbsp;</div>

<div class="pricing_table quarter">
	<div class="price_head" style="background: #f3bf34 !important;">VPS A</div>
	<div class="price_div"><span class="price_month" style="color: #f3bf34 !important;">$25</span> / mo</div>
	<div>10 GB Storage</div>
	<div class="bg_grey"><b>1 TB Data Transfer</b></div>
	<div class="bg_grey"><b>256 MB Memory</b></div>
	<div>WHM</div>
	<div>1 IP Adress</div>
	<div class="price_button"><a href="" class="button">ORDER NOW</a></div>
</div>

<!-- make it others 3 -->

<div style="clear:both;"></div>
</div>
css-table-pricing-demo
View Demo | Download
        submit to reddit Delicious

One Comment Leave a Comment Subscribe RSS

  • tgizmo says:

    Aditia,

    This is very nice! Thank you for posting. It looks excellent in Firefox but the rounded corners and shading are lost in IE. Is it possible to retain these styles for IE?

Leave a Comment