Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create pure CSS pricing tables

How to create pure CSS pricing tables

How to create pure CSS pricing tables
 
How to create pure CSS pricing tables
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Nowadays you can hardly imagine a website not selling anything. So, the best choice is to use pricing tables that allow users to see the 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.

Pricing table with 1 column (pricing plan)

HTML code:

<div class="resp-pt">
  <div class="pt-block">
    <div class="pt-back">
    </div>
    <div class="pt-head">
      <div class="pt-title">Basic</div>
      <div class="pt-sub-title">classic plan</div>
    </div>
    <div class="pt-price-block">$69.99</div>
    <div class="pt-sub-text">per month</div>
    <ul class="pt-list">
      <li>
        <i class="fa fa-hdd-o"></i> 100MB Space
      </li>
      <li>
        <i class="fa fa-folder-o"></i> 2 FTP users
      </li>
      <li>
        <i class="fa fa-database"></i> 2 Databases
      </li>
      <li>
        <i class="fa fa-globe"></i> 1 free domain
      </li>
    </ul>
    <div class="pt-footer">
      <button class="pt-btn">Choose Plan</button>
    </div>
  </div>
</div>

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:

<div class="resp-pt">
  <div class="pt-cols">
    <div class="pt-col">
      <div class="pt-block">
        <div class="pt-back">
        </div>
        <div class="pt-head">
          <div class="pt-title">Basic</div>
          <div class="pt-sub-title">classic plan</div>
        </div>
        <div class="pt-price-block">$69.99</div>
        <div class="pt-sub-text">per month</div>
        <ul class="pt-list">
          <li>
            <i class="fa fa-hdd-o"></i> 100MB Space
          </li>
          <li>
            <i class="fa fa-folder-o"></i> 2 FTP users
          </li>
          <li>
            <i class="fa fa-database"></i> 2 Databases
          </li>
          <li>
            <i class="fa fa-globe"></i> 1 free domain
          </li>
        </ul>
        <div class="pt-footer">
          <button class="pt-btn">Choose Plan</button>
        </div>
      </div>
    </div>
    <div class="pt-col">
      <div class="pt-block">
        <div class="pt-back">
        </div>
        <div class="pt-head">
          <div class="pt-title">Standard</div>
          <div class="pt-sub-title">the best choice</div>
        </div>
        <div class="pt-price-block">$169.99</div>
        <div class="pt-sub-text">per month</div>
        <ul class="pt-list">
          <li>
            <i class="fa fa-hdd-o"></i> 1GB Space
          </li>
          <li>
            <i class="fa fa-folder-o"></i> 2 FTP users
          </li>
          <li>
            <i class="fa fa-database"></i> 2 Databases
          </li>
          <li>
            <i class="fa fa-globe"></i> 1 free domain
          </li>
        </ul>
        <div class="pt-footer">
          <button class="pt-btn">Choose Plan</button>
        </div>
      </div>
    </div>
    <div class="pt-col">
      <div class="pt-block">
        <div class="pt-back">
        </div>
        <div class="pt-head">
          <div class="pt-title">Expert</div>
          <div class="pt-sub-title">the best choice</div>
        </div>
        <div class="pt-price-block">$239.99</div>
        <div class="pt-sub-text">per month</div>
        <ul class="pt-list">
          <li>
            <i class="fa fa-hdd-o"></i> 2GB Space
          </li>
          <li>
            <i class="fa fa-folder-o"></i> 2 FTP users
          </li>
          <li>
            <i class="fa fa-database"></i> 5 Databases
          </li>
          <li>
            <i class="fa fa-globe"></i> 1 free domain
          </li>
        </ul>
        <div class="pt-footer">
          <button class="pt-btn">Choose Plan</button>
        </div>
      </div>
    </div>
    <div class="pt-col">
      <div class="pt-block">
        <div class="pt-back">
        </div>
        <div class="pt-head">
          <div class="pt-title">Premium</div>
          <div class="pt-sub-title">the best choice</div>
        </div>
        <div class="pt-price-block">$999.99</div>
        <div class="pt-sub-text">per month</div>
        <ul class="pt-list">
          <li>
            <i class="fa fa-hdd-o"></i> 1TB Space
          </li>
          <li>
            <i class="fa fa-folder-o"></i> 20 FTP users
          </li>
          <li>
            <i class="fa fa-database"></i> 20 Databases
          </li>
          <li>
            <i class="fa fa-globe"></i> 10 free domain
          </li>
        </ul>
        <div class="pt-footer">
          <button class="pt-btn">Choose Plan</button>
        </div>
      </div>
    </div>
  </div>
</div>

Make it responsive by adding the following CSS code:

.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 got static responsive pricing tables.

Pricing table with 4 columns (pricing plans)

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

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 each pre-selected plan we should change HTML a bit and add pt-selected class:

<div class="pt-block pt-selected">
  <div class="pt-back">
  </div>
  <div class="pt-head">
    <div class="pt-title">Standard</div>
    <div class="pt-sub-title">the best choice</div>
  </div>
  <div class="pt-price-block">$169.99</div>
  <div class="pt-sub-text">per month</div>
  <ul class="pt-list">
    <li>
      <i class="fa fa-hdd-o"></i> 1GB Space
    </li>
    <li>
      <i class="fa fa-folder-o"></i> 2 FTP users
    </li>
    <li>
      <i class="fa fa-database"></i> 2 Databases
    </li>
    <li>
      <i class="fa fa-globe"></i> 1 free domain
    </li>
  </ul>
  <div class="pt-footer">
    <button class="pt-btn">Choose Plan</button>
  </div>
</div>
Pricing table with 4 columns (pricing plans) and one highlighted

Live demo

The following archive contains the examples above:

Also You can check our Pricing Tables (by buying it, you contribute to this resource).

Classic Solid Modern - Responsive Pricing Tables
Responsive Multi Style Bootstrap Pricing Tables
Comparative Responsive Pricing Tables
Smoozy - Responsive Pricing Tables
wpPricing Builder

 

Read also

CSS3: multiple backgrounds

CSS3: multiple backgrounds

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation