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