How to create pure CSS pricing tables

Nowadays it is hard to imagine websites without selling something. For this purpose usually the best choice is pricing tables, which allow users to see a price and features of different products at once. In this article, we will create Pure CSS Pricing Tables.

For the start, let's create one pricing plan block.

one-plan

HTML code:

Basic
classic plan
$69.99
per month
  • 100MB Space
  • 2 FTP users
  • 2 Databases
  • 1 free domain

CSS code:

.resp-pt {
  cursor: default;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  color: #38678f;
  text-align: center;
  position: relative;
  z-index: 1;
}

.resp-pt *,
.resp-pt *:before,
.resp-pt *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.resp-pt .pt-block {
  margin: 30px 0 40px;
  position: relative;
  z-index: 1;
  padding: 35px 15px 25px;
}

.resp-pt .pt-back {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #fff;
  border: 1px solid #699bc4;
}

.resp-pt .pt-head {
  position: relative;
  padding-bottom: 25px;
}

.resp-pt .pt-price-block {
  font-size: 40px;
  line-height: 60px;
  color: #4682b4;
}

.resp-pt .pt-title {
  font-size: 48px;
  line-height: 50px;
  color: #4682b4;
}

.resp-pt .pt-sub-text {
  text-transform: uppercase;
  color: #568ebd;
}
.resp-pt .pt-sub-title {
  padding-top: 5px;
  font-size: 21px;
  line-height: 22px;
  color: #7ba7cc;
}

.resp-pt .pt-footer {
  text-align: center;
  padding-top: 35px;
}

.resp-pt .pt-btn {
  background-color: #4682b4;
  color: #fff;
  border: 1px solid #3f75a2;
  font-size: 24px;
  line-height: 50px;
  height: 52px;
  padding: 0 15px;
  font-family: inherit;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.resp-pt button::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin: 0;
}

.resp-pt .pt-list {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  display: inline-block;
  text-align: left;
}

.resp-pt .pt-list li {
  list-style: none;
  display: block;
  margin: 0;
  padding: 10px 0 5px;
}

.resp-pt .pt-list .fa {
  width: 25px;
  font-size: 21px;
}

Icons was done with Font Awesome.

Now let's create HTML structure for 4 pricing plans:

Basic
classic plan
$69.99
per month
  • 100MB Space
  • 2 FTP users
  • 2 Databases
  • 1 free domain
Standard
the best choice
$169.99
per month
  • 1GB Space
  • 2 FTP users
  • 2 Databases
  • 1 free domain
Expert
the best choice
$239.99
per month
  • 2GB Space
  • 2 FTP users
  • 5 Databases
  • 1 free domain
Premium
the best choice
$999.99
per month
  • 1TB Space
  • 20 FTP users
  • 20 Databases
  • 10 free domain

and make it responsive, by adding CSS:

.resp-pt .pt-cols {
  zoom: 1;
}

.resp-pt .pt-cols:before,
.resp-pt .pt-cols:after {
  content: "";
  display: table;
}

.resp-pt .pt-cols:after {
  clear: both;
}

@media (min-width: 620px) {
  .resp-pt .pt-cols > .pt-col {
    width: 50%;
  }
}

@media (min-width: 620px) {
  .resp-pt .pt-cols {
    margin: 0 -15px;
  }
  .resp-pt .pt-cols > .pt-col {
    padding: 0 15px;
    float: left;
  }
}

@media (min-width: 620px) and (max-width: 991px) {
  .resp-pt .pt-cols > .pt-col:nth-child(2n+1) {
    clear: left;
  }
}

@media (min-width: 992px) {
  .resp-pt .pt-cols > .pt-col {
    width: 25%;
  }
  .resp-pt .pt-cols > .pt-col:nth-child(4n+1) {
    clear: left;
  }
}

At this stage we have static Responsive Pricing Tables.

4-plans

To make it more attractive we can add a hover animation and make some of plans pre-selected.

CSS code:

.resp-pt .pt-btn,
.resp-pt .pt-back,
.resp-pt .pt-price-block,
.resp-pt .pt-block,
.resp-pt .pt-title,
.resp-pt .pt-sub-title,
.resp-pt .pt-sub-text {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.resp-pt .pt-selected,
.resp-pt .pt-block:hover,
.resp-pt:hover .pt-selected:hover,
.resp-pt .pt-selected .pt-title,
.resp-pt .pt-block:hover .pt-title,
.resp-pt:hover .pt-selected:hover .pt-title,
.resp-pt .pt-selected .pt-price-block,
.resp-pt .pt-block:hover .pt-price-block,
.resp-pt:hover .pt-selected:hover .pt-price-block {
  color: #fff;
}

.resp-pt .pt-selected .pt-sub-title,
.resp-pt .pt-block:hover .pt-sub-title,
.resp-pt:hover .pt-selected:hover .pt-sub-title,
.resp-pt .pt-selected .pt-sub-text,
.resp-pt .pt-block:hover .pt-sub-text,
.resp-pt:hover .pt-selected:hover .pt-sub-text {
  color: #eee;
}

.resp-pt .pt-selected .pt-btn,
.resp-pt .pt-block:hover .pt-btn,
.resp-pt:hover .pt-selected:hover .pt-btn,
.resp-pt .pt-selected .btn,
.resp-pt .pt-block:hover .btn,
.resp-pt:hover .pt-selected:hover .btn {
  background-color: #fff;
  color: #4682b4;
  -webkit-box-shadow: 0 3px 10px -3px #000;
  box-shadow: 0 3px 10px -3px #000;
  border-color: #f2f2f2;
}

.resp-pt .pt-selected .pt-btn:hover,
.resp-pt .pt-block:hover .pt-btn:hover,
.resp-pt:hover .pt-selected:hover .pt-btn:hover,
.resp-pt .pt-selected .btn:hover,
.resp-pt .pt-block:hover .btn:hover,
.resp-pt:hover .pt-selected:hover .btn:hover,
.resp-pt .pt-selected .pt-btn:focus,
.resp-pt .pt-block:hover .pt-btn:focus,
.resp-pt:hover .pt-selected:hover .pt-btn:focus,
.resp-pt .pt-selected .btn:focus,
.resp-pt .pt-block:hover .btn:focus,
.resp-pt:hover .pt-selected:hover .btn:focus {
  -webkit-box-shadow: 0 3px 10px -3px #315a7d;
  box-shadow: 0 3px 10px -3px #315a7d;
}

.resp-pt .pt-selected .pt-back,
.resp-pt .pt-block:hover .pt-back,
.resp-pt:hover .pt-selected:hover .pt-back {
  background-color: #4682b4;
}

.resp-pt:hover .pt-selected {
  color: #38678f;
}

.resp-pt:hover .pt-selected .pt-title {
  color: #4682b4;
}

.resp-pt:hover .pt-selected .pt-sub-title {
  color: #7ba7cc;
}

.resp-pt:hover .pt-selected .pt-sub-text {
  color: #568ebd;
}

.resp-pt:hover .pt-selected .pt-back {
  background-color: #fff;
}

.resp-pt:hover .pt-selected .pt-price-block {
  color: #4682b4;
}

.resp-pt:hover .pt-selected .pt-btn,
.resp-pt:hover .pt-selected .btn {
  background-color: #4682b4;
  color: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #3f75a2;
}

For pre-selected plan we should change HTML a little, add pt-selected class:

Standard
the best choice
$169.99
per month
  • 1GB Space
  • 2 FTP users
  • 2 Databases
  • 1 free domain

Live demo

The following archive contains the examples above:

Pure CSS Pricing Tables

pure_css_pricing_tables.zip 522.55 kB

Continue reading here: Animated Falling Snow Using Keyframes in CSS3 without Java Script

Was this article helpful?

0 0