Create Simple Price Table in CSS

In this tutorial I am going to share simple HTML CSS based Price table created by Robin Brons which you can add on your website to display different different product or services plan to your customer. When building a pricing table, you want to make sure that you have the features listed that are going to be the most important to people using/paying for your service.

CSS Price Table


HTML

Create simple html to display printable for your different different plan.

<div class="promos">  
<div class="promo">
  <div class="deal">
    <span>Premium</span>
    <span>This is really a good deal!</span>
  </div>
  <span class="price">$79</span>
  <ul class="features">
    <li>Some great feature</li>
    <li>Another super feature</li>
    <li>And more...</li>   
  </ul>
  <button>Sign up</button>
</div>
<div class="promo scale">
  <div class="deal">
    <span>Plus</span>
    <span>This is really a good deal!</span>
  </div>
  <span class="price">$89</span>
  <ul class="features">
    <li>Some great feature</li>
    <li>Another super feature</li>
    <li>And more...</li>   
  </ul>
  <button>Sign up</button>
</div>
<div class="promo">
  <div class="deal">
    <span>Basic</span>
    <span>Basic membership</span>
  </div>
  <span class="price">$69</span>
  <ul class="features">
    <li>Choose the one on the left</li>
    <li>We need moneyy</li>
    <li>And more...</li>   
  </ul>
  <button>Sign up</button>
</div>
</div>



CSS

Styling your price table.

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
html {
  background: rgb(246, 248, 248);
}
body {
  padding: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;  
}
.promos {
  width: 800px;
  margin: 0 auto;
  margin-top: 50px;
}
.promo {
  width: 250px;
  background: #0F1012; 
  color: #f9f9f9;
  float: left;
}
.deal {
  padding: 10px 0 0 0;
}
.deal span {
  display: block;
  text-align: center;
}
.deal span:first-of-type {
  font-size: 23px;  
}
.deal span:last-of-type {
  font-size: 13px;
}
.promo .price {
  display: block;
  width: 250px;  
  background: #292b2e;
  margin: 15px 0 10px 0;
  text-align: center;
  font-size: 23px;
  padding: 17px 0 17px 0;
}
ul {
  display: block;
  margin: 20px 0 10px 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  color: #999999;
}
li {
  display: block;
  margin: 10px 0 0 0;
}
button {
  border: none;
  border-radius: 40px;
  background: #292b2e;
  color: #f9f9f9;
  padding: 10px 37px;
  margin: 10px 0 20px 60px;
}
.scale {
  transform: scale(1.2);
  box-shadow: 0 0 4px 1px rgba(20, 20, 20, 0.8);
}
.scale button {
  background: #64AAA4;
}
.scale .price {
  color: #64AAA4;
}
</style>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.