Building CSS3 Animated Pricing Table

Quite often I’m given a PSD and asked to convert this into HTML/CSS for the graphic designer. I was given a PSD which was a pricing table and realised that there are ways to improve the look of this just by using CSS. When I put this suggestion forward to the graphic designer they said no and want to me to just make the table and everything else was going to be images.

Just to prove I was right I am writing this tutorial to turn the below PSD image into HTML and pure CSS, this is not the PSD I was given but it’s a good example.

This is just a simple PSD of a pricing table but the middle column is larger than the others. I thought this would be ideal to use CSS animation to scale the current column the mouse is hovering over.

This tutorial is will teach you how to create this pricing table with the CSS scaling effects, view the demo to see what we will be making.

The HTML

The HTML for the table is in fact not a table this can easily be done by using a table but I prefer not working with tables. The data that needs to be displayed can be better organised by using a list this is because the data can to split into columns to be displayed to the visitor.

• First we create a div which will hold the lists.
• Create 5 lists for different columns.
• Enter the column data.

<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 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 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 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 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 class="buy_now">Buy Now</a></li>
</ul>
</div>

The CSS

First we are going to write the style for the outline of the whole table. This can easily be done using the CSS outline property, then we need to curve the border by using the border-radius property.

Complete this by using the following CSS.

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

Style the Price Table Columns

Now we have the outline of the price table lets create the columns from the list items. Do the following to the lists:

• First remove the list styles
• Make the lists float left
• Create the width of the each column
• Make sure there is no margin for the lists
• Add a border around the whole list
• Add some padding inside the padding
• Make the text align to the center
• Make sure that the background colour is white

Here is the CSS for the above.

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

Style The Hover Event

Looking back at the PSD image we had a column which was larger than the other columns, we are going to achieve this look by scaling the column up when the mouse is over the column. For this effect we can just use the :hover event on the list.

To achieve the the scaling of the column we need to use a CSS3 feature called transform.

• Transform the column with a scale of 1.1, therefore increase the size by 10%.
• Set a box shadow to make it look as if the box is coming out at you.
• Change the cursor to be a pointer.

Copy the following CSS to achieve the column scaling.

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

Styling Each List Item

Each list item needs to have padding and a border on the bottom, use the following CSS to achieve this styling.

.pricing_table ul li
{
  border-bottom:1px dashed #cfd2d2;
  padding:10px 0;
}

Styling The Rows

Almost every row in the pricing table has a different styling a good thing about the CSS3 we are using is that you can change any row you want just by using CSS.

• The first row needs to be larger font and with a bold weight.
• On the second row we need a darker background colour.
• With the 3rd row we need a smaller font but the weight needs to be bold.
• With the remaining rows we need to set the font size to be 14pixels.
• On the last row we are going to add a link which will be the sign up now button call to action.

Use the following CSS to achieve this look.

.pricing_table ul li:first-child
{
  font-size:18px;
  font-weight:700;
}

.pricing_table ul li:nth-child(2)
{
  background:#fbfbfb;
}

.pricing_table ul li:nth-child(3)
{
  font-size:12px;
  font-weight:700;
}

.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;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e696', endColorstr='#d1d360', GradientType=0);
  background:linear-gradient(top,#e5e6960%,#d1d360100%);
  color:#000;
  font-style:italic;
  display:block;
  margin:5px 0;
  padding:10px;
}

View the demo to make sure that your pricing table is the same. If you followed the tutorial you should have the same.
written by Paul