• Pin It

CSS3 Pricing Table UI Element (Tutorial)

In this tutorial we’re going to create an amazing pricing table UI element using CSS3. It has a nice hover effect created with CSS3 transitions, when you roll the mouse over a pricing plan. You can easily add it in your own e-commerce website, where your pricing offer packages it’s available.

The pricing table design is easy to adapt for your own website, the colors and transitions can be modified through the CSS file, while the font for the title package and the product price can be replaced from the Google Fonts Library. Also make sure that all the information and features for a specific plan is well written so there will be no confusion for a potential customer to decide which one to choose.


You may also like the following tutorial articles:


The structure is pretty simple. Create a < div > container that will hold the content. Next create the columns. Each column is inside a div with an unordered list. First two list elements are for package title and price, the others that follow are for package features.

<div class="price_table">
<div class="column_1">
<li class="header_row_1 align_center">
<div class="pack-title">Basic</div>
<li class="header_row_2 align_center">
<div class="price"><span>$29</span></div>
<div class="time">per year</div>
<li class="row_style_1 align_center"><span>Lorem ipsum dolor sit</span></li>
<li class="row_style_1 align_center"><span>Praesent ac elit</span></li>
<li class="row_style_1 align_center"><span>Duis quis risus enim</span></li>
<li class="row_style_1 align_center no-option"><span>Suspendisse rutrum nulla</span></li>
<li class="row_style_1 align_center no-option"><span>Quisque mauris urna feugiat</span></li>
<li class="row_style_footer_1"><a href="#" class="buy_now">Sign Up</a></li>
</ul></div><!--end column-->
</div><!--end price table-->


Now let’s setup the styles for the markup. Here’s the code for the .price-table class container.

.price_table {width: 100%;
	height: 100%;
	font-size: 13px;
	font-family: arial, sans-serif;
	font-weight: normal;
	color: #444444;

For the column code we used some basic CSS3 transition effects that are supported by modern browsers (make sure your web-brower is up-to-date). On mouse over a column table, the content will be translated 15px top and 5px left.

.price_table .column_1{height: 100%;
	float: left;
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
   -o-transform: translate(0px, 0px);
   -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;

/**** COLUMN HOVERS ****/
.price_table .column_1:hover{
	position: relative;
	z-index: 100;
	box-shadow: 5px 0px 25px rgba(0,0,0,0.7);
	-webkit-box-shadow: 5px 0px 25px rgba(0,0,0,0.7);
	-moz-box-shadow: 5px 0px 25px rgba(0,0,0,0.7);
	-webkit-transform: translate(-5px,-15px);
   -moz-transform: translate(-5px,-15px);
   -o-transform: translate(-5px,-15px);
   -ms-transform: translate(-5px,-15px);
   transform: translate(-5px,-15px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;

The buttons are created using background gradient, a nice CSS3 property. Here’s the code for that:

/**** BUY NOW BUTTON ****/
	width: 60px;
	height: 20px;
	padding: 5px 16px;
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
	border-style: solid;
    border-width: 1px;
	color: #513b26;
	border-color: #ddb385 #dca36c #db904f;
	background: #fab778;
	background: -webkit-gradient(linear, left top, left bottom, from(#fcca94), to(#f9a55c));
	background: -moz-linear-gradient(top, #fcca94,  #f9a55c);
	background: linear-gradient(#fcca94, #f9a55c);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;


That’s it for now. We hope that you like the pricing table tutorial and let us know if you’re using it in your projects. Download the archive and play with the CSS3 styles. Stay tuned for more tutorials and freebies.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+