Creating Simple and Interactive Pricing Tables in CSS


In this tutorial we’re going to learn how to create some cool looking and interactive pricing tables, In pure CSS! Usually the pricing tables are created using static images which follows the process of making them interactive, but the technique we’ll learn today will facilitate the process and will allow us to create beautiful pricing tables that look like this:

This is what it should look like when done

Standard Plan

$59.99

per Month

100 GB Disk Space

50 Email Accounts

600 Subdomains

FREE SEO

Sign Up Now

Looks pretty cool, doesn’t it? Let’s dive in on how to create it.

Setting up the structure of the table
All the table elements will all be added inside a div with a class ui_box which will hold two main divs, the top part of the table and the inner part of the table. The top part will have the name of the plan and the price will be displayed nicely. The inner part will hold the features and the drop button. The HTML should look like the following:

   <div class="ui_box">
     <div class="ui_box_top highlight">
        <h1>Standard  Plan</h1>
        <h2>$59.99</h2>
        <p>per Month</p>
     </div>
     <div class="ui_box_inner">
       <p>100 GB Disk Space</p>
       <p>50 Email Accounts</p>
       <p>600 Subdomains</p>
       <p>FREE SEO</p>
     </div>
     <div class="drop">
      <p>Sign Up Now</p>
      <div class="arrow"></div>
     </div>
  </div>

Styling the outer container box ui_box
The ui_box will be the main container that will capture the hover event and scale the pricing table. So we’ll have to write the CSS for animating the pricing table’s base on hover with the following CSS:

  .ui_box {
      position: relative;
      width: 300px;
      float:left;
      margin: 0 auto;
      background: #dedede;
      cursor: pointer;
      transform: scale(1);
      transition-property: all;
      transition-duration: .1s; 
      border-bottom: 5px solid #107FC9;
      -webkit-box-shadow: 0 1px 1px 0px rgba(0,0,0,.25);
      box-shadow: 0 1px 1px 0px rgba(0,0,0,.25);
      }
  .ui_box:hover {
      transform: scale(1.1);
      transition-property: transform,background;
      -webkit-box-shadow: 0 1px 3px 2px rgba(0,0,0,.25);
      box-shadow: 0 1px 3px 2px rgba(0,0,0,.25);
      transition-duration: .3s;
      position: relative;
      z-index: 1; 
      }
  

Now that we have created the base of the table, we’ll need to style the text inside the table. We’ll do that by selecting appropriate fonts and setting up the font sizes correctly. We can do that by using @import to get the webfonts we’re going to use and then assign them to the text. We’ll be using Montserrat and Source Sans Pro webfonts.

       @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
       @import url(http://fonts.googleapis.com/cssfamily=Source+Sans+Pro:300,400,600);      
      .ui_box h2 {
        font-weight: normal;
        font-size: 40px;
        font-family: 'Montserrat', sans-serif;
        margin: -4px 0px 3px 0px; }
      .ui_box h1 {
        font-weight: normal;
        font-size: 20px;
        font-family: 'Montserrat', sans-serif;
        margin: -4px 0px 3px 0px; }
      .ui_box p {
        font-size: 15px;
        font-family: 'Source Sans Pro', sans-serif;
        color: #fff;
        clear: left;
        font-weight: 400;
        margin: 1px 0px 0px 0px; }
  

Adding the table content
The contents of the table are split into two main parts: the Top part – which has the name of the plan and the price – and the inner part which contains the details of the plan. When styling the top part, we should keep in mind that we might need to highlight a table, so we’ll have to create an extra .highlight class in order to add to the table to make the header blue.

Table Top Panel (Without .highlight class)

Standard Plan

$59.99

per Month

.ui_box__top {
   background:#3b3b3b;
   padding:15px;
}
.highlight {
  background:#107FC9 !important;
}
.ui_box .ui_box__inner p {
  text-align:center;
  background:#f0f0f0;
  color: #131313;
  padding:10px;
}

.ui_box:hover > .ui_box__inner p {
  margin: 1px 0px 0px 0px; 
  background:#f0f0f0;
  color: #131313;
  padding:10px;}

Table Top Panel (With .highlight class)

Standard Plan

$59.99

per Month

Each row on the inner part of the table will be made using a <p> element to hold the text. This should be styled as follows:

.ui_box .ui_box__inner p {
  text-align:center;
  background:#f0f0f0;
  color: #131313;
  padding:10px;
}

Adding <p> tag with text inside <div class="ui_box_inner">

Standard Plan

$59.99

per Month

100GB Disk Space

Making the drop panel
You noticed the blue button that drops when you hover over the table, right? By using CSS animations we can easily create this effect. We first create a regular div and then give it a class drop and then style that class in CSS as follows:

.ui .drop {
      z-index: 3;
      opacity: 0;
      width: 240px;
      background: #107FC9;
      position: absolute;
      color: white;
      bottom: 100px;
      padding: 15px 30px 0px 30px;
      transition-property: bottom,opacity;
      transition-duration: .8s; }
      body .ui .drop p {
        color: #f8fbfa; }

.ui_box:hover > .drop {
  position:relative;
  transition-property: bottom,opacity;
  transition-duration: .2s;
  padding-bottom:18px;
  -webkit-box-shadow: 0 1px 1px 0px rgba(0,0,0,.35);
  box-shadow: 0 1px 1px 0px rgba(0,0,0,.35);
  bottom: 0px;
  opacity: 1; }

.ui_box:hover > .drop .arrow {
  transition-property: transform;
  transition-duration: .5s;
  transform: rotate(405deg); }

.arrow {
  width: 6px;
  height: 6px;
  margin-top: 15px;
  transition-property: transform;
  transition-duration: 1s;
  transform: rotate(0deg);
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 1px solid #CDEAD3;
  border-right: 1px solid #CDEAD3;
  float: right;
  position: relative;
  top: -24px;
  right: 0px; }

Hover on the table below to see the hover reveal animation

Standard Plan

$59.99

per Month

 

Sign Up Now

Final Result:
Click Here for a full demo I made on codepen.
That’s it! Now we’ve created a cool looking and interactive pricing table. I hope you enjoyed this tutorial.

Result without .highlight class

Standard Plan

$59.99

per Month

100 GB Disk Space

50 Email Accounts

600 Subdomains

FREE SEO

Sign Up Now

Five Informative CSS Blogs All Designers Should Follow

workstation

The days are over when we would depend on designers and developers to help create and update our websites. Now, with CSS available on the market, working on our own websites have become simple and hassle free. CSS is flexible and it is extremely easy to create code. If you have your own website, or are working […]

Read on...

Creating Custom Flat and Flipping Style CSS Checkboxes

In this tutorial, we will create some flat style toggle switches purely using CSS. Those switches could be used instead of the generic, dull looking, checkboxes. Usually, while we are creating new websites, we use checkboxes to give users the option to select certain things on the site. Most of the time those standard checkboxes […]

Read on...

Learn HTML5 and CSS3 with these Resources

The much asked for programming languages in the world of web designing are HTML5 and CSS3 . As a web designer planning to make a career in this field, you must learn these languages. Web developers have stopped using javascript and Flash to some extent,after the introduction of these two languages, which explains the need […]

Read on...

10 Latest CSS3 Development Tools

Be it a housewife, a college pass out a kid or a senior citizen, nowadays everyone want to start their own sweet small business to earn some money. These businesses may be small, part-time or a large scale factory set-up. Once you plan the business you start hiring people, make the product and sell to […]

Read on...

13 Latest CSS3 Tutorials for Beginners

The website design is increasing day by day and thus its technology changing daily. HTMLs code is developing, people need more pics and images with videos on site but still not make them heavier. Mobile users have increased, thus adaptive style is needed with every change of screen size. The new CSS3 is super impressive […]

Read on...

10 Best Free CSS3 Frameworks of Year 2015

Now that the internet can be accessed on any mobile device, whether a laptop, desktop, tablets, smartphone, websites are designed in responsive web version. It is the ability to change the page and font size according to the screen size of the user. Thus a website is accessible anytime on any instrument. CSS3 frameworks were […]

Read on...

CSS Typographic Reset: Step By Step

A CSS reset is a short set of rules that resets the styling of all the basic HTML elements. In the same way that you set basic CSS rules, applying a reset will give you a baseline set of variables for everything you create. For example, if you were using CSS to apply a background […]

Read on...

The Basics of Border-Radius in CSS

Border radius can be an excellent way to improve the visual effects. In addition, it can add lively effect to the webpage. However, here in this article, we are going to discuss about the cleverer ways of using the border-radius in CSS. However, elements can be given rounded corners by the application of the border-radius […]

Read on...

Negative Margin Spacing Troubleshooting: CSS Newbie

The margin property of CSS defines the spacing surrounding the outside of elements. Margins have no background color and it will be transparent as well. However, the normal possible values of margin in CSS are measured in auto, length, percentage and inherit. However, in this particular article, we are going to discuss about the negative […]

Read on...