12+ CSS Pricing Table Examples

This post contains a total of 12+ Hand-Picked CSS Pricing Table Examples with Source Code. All these Pricing Tables are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

CSS Pricing Table Examples

1. By Travis Williamson

Made by Travis Williamson. Modern looking pricing table with minimalistic button hover effect. Source

css pricing table by travis williamson
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'>
  
<style>
html {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.background {
  padding: 0 25px 25px;
  position: relative;
  width: 100%;
}

.background::after {
  content: '';
  background: #60a9ff;
  background: linear-gradient(to bottom, #60a9ff 0%,#4394f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60a9ff', endColorstr='#4394f4',GradientType=0 );
  height: 350px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

@media (min-width: 900px) {
  .background {
    padding: 0 0 25px;
  }
}

.container {
  margin: 0 auto;
  padding: 50px 0 0;
  max-width: 960px;
  width: 100%;
}

.panel {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 25px;
  position: relative;
  width: 100%;
  z-index: 10;
}

.pricing-table {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .pricing-table {
    flex-direction: row;
  }
}

.pricing-table * {
  text-align: center;
  text-transform: uppercase;
}

.pricing-plan {
  border-bottom: 1px solid #e1f1ff;
  padding: 25px;
}

.pricing-plan:last-child {
  border-bottom: none;
}

@media (min-width: 900px) {
  .pricing-plan {
    border-bottom: none;
    border-right: 1px solid #e1f1ff;
    flex-basis: 100%;
    padding: 25px 50px;
  }

  .pricing-plan:last-child {
    border-right: none;
  }
}

.pricing-img {
  margin-bottom: 25px;
  max-width: 100%;
}

.pricing-header {
  color: #888;
  font-weight: 600;
  letter-spacing: 1px;
}

.pricing-features {
  color: #016FF9;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 50px 0 25px;
}

.pricing-features-item {
  border-top: 1px solid #e1f1ff;
  font-size: 12px;
  line-height: 1.5;
  padding: 15px 0;
}

.pricing-features-item:last-child {
  border-bottom: 1px solid #e1f1ff;
}

.pricing-price {
  color: #016FF9;
  display: block;
  font-size: 32px;
  font-weight: 700;
}

.pricing-button {
  border: 1px solid #9dd1ff;
  border-radius: 10px;
  color: #348EFE;
  display: inline-block;
  margin: 25px 0;
  padding: 15px 35px;
  text-decoration: none;
  transition: all 150ms ease-in-out;
}

.pricing-button:hover,
.pricing-button:focus {
  background-color: #e1f1ff;
}

.pricing-button.is-featured {
  background-color: #48aaff;
  color: #fff;
}

.pricing-button.is-featured:hover,
.pricing-button.is-featured:active {
  background-color: #269aff;
}
</style>
</head>
<body>
  <div class="background">
  <div class="container">
    <div class="panel pricing-table">
      
      <div class="pricing-plan">
        <img src="https://s22.postimg.cc/8mv5gn7w1/paper-plane.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Personal</h2>
        <ul class="pricing-features">
          <li class="pricing-features-item">Custom domains</li>
          <li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
        </ul>
        <span class="pricing-price">Free</span>
        <a href="#/" class="pricing-button">Sign up</a>
      </div>
      
      <div class="pricing-plan">
        <img src="https://s28.postimg.cc/ju5bnc3x9/plane.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Small team</h2>
        <ul class="pricing-features">
          <li class="pricing-features-item">Never sleeps</li>
          <li class="pricing-features-item">Multiple workers for more powerful apps</li>
        </ul>
        <span class="pricing-price">$150</span>
        <a href="#/" class="pricing-button is-featured">Free trial</a>
      </div>
      
      <div class="pricing-plan">
        <img src="https://s21.postimg.cc/tpm0cge4n/space-ship.png" alt="" class="pricing-img">
        <h2 class="pricing-header">Enterprise</h2>
        <ul class="pricing-features">
          <li class="pricing-features-item">Dedicated</li>
          <li class="pricing-features-item">Simple horizontal scalability</li>
        </ul>
        <span class="pricing-price">$400</span>
        <a href="#/" class="pricing-button">Free trial</a>
      </div>
      
    </div>
  </div>
</div>
</body>
</html>

2. By Alex

Made by Alex. Adaptive CSS Pricing Table with Cool hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
@charset "UTF-8";
.pricingTable {
  margin: 40px auto;
}
.pricingTable > .pricingTable-title {
  text-align: center;
  color: #6e768d;
  font-size: 3em;
  font-size: 300%;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.pricingTable > .pricingTable-subtitle {
  text-align: center;
  color: #b4bdc6;
  font-size: 1.8em;
  letter-spacing: 0.04em;
  margin-bottom: 60px;
}
@media screen and (max-width: 480px) {
  .pricingTable > .pricingTable-subtitle {
    margin-bottom: 30px;
  }
}
.pricingTable-firstTable {
  list-style: none;
  padding-left: 2em;
  padding-right: 2em;
  text-align: center;
}
.pricingTable-firstTable_table {
  vertical-align: middle;
  width: 31%;
  background-color: #ffffff;
  display: inline-block;
  padding: 0px 30px 40px;
  text-align: center;
  max-width: 320px;
  transition: all 0.3s ease;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table {
    display: block;
    width: 90%;
    margin: 0 auto;
    max-width: 90%;
    margin-bottom: 20px;
    padding: 10px;
    padding-left: 20px;
  }
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table > * {
    display: inline-block;
    vertical-align: middle;
  }
}
@media screen and (max-width: 480px) {
  .pricingTable-firstTable_table > * {
    display: block;
    float: none;
  }
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table:after {
    display: table;
    content: "";
    clear: both;
  }
}
.pricingTable-firstTable_table:hover {
  transform: scale(1.08);
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table:hover {
    transform: none;
  }
}
.pricingTable-firstTable_table:not(:last-of-type) {
  margin-right: 3.5%;
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table:not(:last-of-type) {
    margin-right: auto;
  }
}
.pricingTable-firstTable_table:nth-of-type(2) {
  position: relative;
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table:nth-of-type(2) h1 {
    padding-top: 8%;
  }
}
.pricingTable-firstTable_table:nth-of-type(2):before {
  content: "Most Popular";
  position: absolute;
  color: white;
  display: block;
  background-color: #3bbdee;
  text-align: center;
  right: 15px;
  top: -25px;
  height: 65px;
  width: 65px;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 0.5em;
  padding-top: 22px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  transition: all 0.5s ease;
}
@media screen and (max-width: 988px) {
  .pricingTable-firstTable_table:nth-of-type(2):before {
    font-size: 0.6em;
  }
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table:nth-of-type(2):before {
    left: 10px;
    width: 45px;
    height: 45px;
    top: -10px;
    padding-top: 13px;
  }
}
@media screen and (max-width: 480px) {
  .pricingTable-firstTable_table:nth-of-type(2):before {
    font-size: 0.8em;
  }
}
.pricingTable-firstTable_table:nth-of-type(2):hover:before {
  transform: rotate(360deg);
}
.pricingTable-firstTable_table__header {
  font-size: 1.6em;
  padding: 40px 0px;
  border-bottom: 2px solid #ebedec;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 1068px) {
  .pricingTable-firstTable_table__header {
    font-size: 1.45em;
  }
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table__header {
    padding: 0px;
    border-bottom: none;
    float: left;
    width: 33%;
    padding-top: 3%;
    padding-bottom: 2%;
  }
}
@media screen and (max-width: 610px) {
  .pricingTable-firstTable_table__header {
    font-size: 1.3em;
  }
}
@media screen and (max-width: 480px) {
  .pricingTable-firstTable_table__header {
    float: none;
    width: 100%;
    font-size: 1.8em;
    margin-bottom: 5px;
  }
}
.pricingTable-firstTable_table__pricing {
  font-size: 3em;
  padding: 30px 0px;
  border-bottom: 2px solid #ebedec;
  line-height: 0.7;
}
@media screen and (max-width: 1068px) {
  .pricingTable-firstTable_table__pricing {
    font-size: 2.8em;
  }
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table__pricing {
    border-bottom: none;
    padding: 0;
    float: left;
    clear: left;
    width: 33%;
  }
}
@media screen and (max-width: 610px) {
  .pricingTable-firstTable_table__pricing {
    font-size: 2.4em;
  }
}
@media screen and (max-width: 480px) {
  .pricingTable-firstTable_table__pricing {
    float: none;
    width: 100%;
    font-size: 3em;
    margin-bottom: 10px;
  }
}
.pricingTable-firstTable_table__pricing span:first-of-type {
  font-size: 0.35em;
  vertical-align: top;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 1068px) {
  .pricingTable-firstTable_table__pricing span:first-of-type {
    font-size: 0.3em;
  }
}
.pricingTable-firstTable_table__pricing span:last-of-type {
  vertical-align: bottom;
  font-size: 0.3em;
  letter-spacing: 0.04em;
  padding-left: 0.2em;
}
@media screen and (max-width: 1068px) {
  .pricingTable-firstTable_table__pricing span:last-of-type {
    font-size: 0.25em;
  }
}
.pricingTable-firstTable_table__options {
  list-style: none;
  padding: 15px;
  font-size: 0.9em;
  border-bottom: 2px solid #ebedec;
}
@media screen and (max-width: 1068px) {
  .pricingTable-firstTable_table__options {
    font-size: 0.85em;
  }
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table__options {
    border-bottom: none;
    padding: 0;
    margin-right: 10%;
  }
}
@media screen and (max-width: 610px) {
  .pricingTable-firstTable_table__options {
    font-size: 0.7em;
    margin-right: 8%;
  }
}
@media screen and (max-width: 480px) {
  .pricingTable-firstTable_table__options {
    font-size: 1.3em;
    margin-right: none;
    margin-bottom: 10px;
  }
}
.pricingTable-firstTable_table__options > li {
  padding: 8px 0px;
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table__options > li {
    text-align: left;
  }
}
@media screen and (max-width: 610px) {
  .pricingTable-firstTable_table__options > li {
    padding: 5px 0;
  }
}
@media screen and (max-width: 480px) {
  .pricingTable-firstTable_table__options > li {
    text-align: center;
  }
}
.pricingTable-firstTable_table__options > li:before {
  content: "โœ“";
  display: inline-flex;
  margin-right: 15px;
  color: white;
  background-color: #74ce6a;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  font-size: 0.8em;
  padding: 2px;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1068px) {
  .pricingTable-firstTable_table__options > li:before {
    width: 14px;
    height: 14px;
    padding: 1.5px;
  }
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table__options > li:before {
    width: 12px;
    height: 12px;
  }
}
.pricingTable-firstTable_table__getstart {
  color: white;
  border: 0;
  background-color: #71ce73;
  margin-top: 30px;
  border-radius: 5px;
  cursor: pointer;
  padding: 15px;
  box-shadow: 0px 3px 0px 0px #66ac64;
  letter-spacing: 0.07em;
  transition: all 0.4s ease;
}
@media screen and (max-width: 1068px) {
  .pricingTable-firstTable_table__getstart {
    font-size: 0.95em;
  }
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table__getstart {
    margin-top: 0;
  }
}
@media screen and (max-width: 610px) {
  .pricingTable-firstTable_table__getstart {
    font-size: 0.9em;
    padding: 10px;
  }
}
@media screen and (max-width: 480px) {
  .pricingTable-firstTable_table__getstart {
    font-size: 1em;
    width: 50%;
    margin: 10px auto;
  }
}
.pricingTable-firstTable_table__getstart:hover {
  transform: translateY(-10px);
  box-shadow: 0px 40px 29px -19px rgba(102, 172, 100, 0.9);
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table__getstart:hover {
    transform: none;
    box-shadow: none;
  }
}
.pricingTable-firstTable_table__getstart:active {
  box-shadow: inset 0 0 10px 1px #66a564, 0px 40px 29px -19px rgba(102, 172, 100, 0.95);
  transform: scale(0.95) translateY(-9px);
}
@media screen and (max-width: 767px) {
  .pricingTable-firstTable_table__getstart:active {
    transform: scale(0.95) translateY(0);
    box-shadow: none;
  }
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 100%;
  background-color: #f0f4f7;
  color: #717787;
}
@media screen and (max-width: 960px) {
  body {
    font-size: 80%;
  }
}
@media screen and (max-width: 776px) {
  body {
    font-size: 70%;
  }
}
@media screen and (max-width: 496px) {
  body {
    font-size: 50%;
  }
}
@media screen and (max-width: 320px) {
  body {
    font-size: 40%;
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>
</head>
<body>
  <div class="pricingTable">
  <h2 class="pricingTable-title">Find a plan that's right for you.</h2>
  <h3 class="pricingTable-subtitle">Every plan comes with a 30-day   free trial.</h3>
  
  <ul class="pricingTable-firstTable">
    <li class="pricingTable-firstTable_table">
      <h1 class="pricingTable-firstTable_table__header">Bronze Packege</h1>
      <p class="pricingTable-firstTable_table__pricing"><span>$</span><span>10</span><span>Month</span></p>
      <ul class="pricingTable-firstTable_table__options">
        <li>Unlimited Listing</li>
        <li>Edit Your Listing</li>
        <li>Approve Reviews</li>
      </ul>
      <button class="pricingTable-firstTable_table__getstart">Get Started Now</button>
    </li><li class="pricingTable-firstTable_table">
      <h1 class="pricingTable-firstTable_table__header">Gold Packege</h1>
      <p class="pricingTable-firstTable_table__pricing"><span>$</span><span>19</span><span>Month</span></p>
      <ul class="pricingTable-firstTable_table__options">
        <li>Unlimited Listing</li>
        <li>Edit Your Listing</li>
        <li>Approve Reviews</li>
        <li>Take Booking Online</li>
        <li>24/7 Support Service</li>
      </ul>
      <button class="pricingTable-firstTable_table__getstart">Get Started Now</button>
    </li><li class="pricingTable-firstTable_table">
      <h1 class="pricingTable-firstTable_table__header">Platinum Packege</h1>
      <p class="pricingTable-firstTable_table__pricing"><span>$</span><span>49</span><span>Month</span></p>
      <ul class="pricingTable-firstTable_table__options">
        <li>Unlimited Listing</li>
        <li>Edit Your Listing</li>
        <li>Approve Reviews</li>
      </ul>
      <button class="pricingTable-firstTable_table__getstart">Get Started Now</button>
    </li>
  </ul>
</div>
</body>
</html>

3. By Vivek Kumar

Made by Vivek Kumar. Flat Pricing table with no animations or effects. Source

css pricing table by vivek kumar
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/*
Inspired by the dribble shot http://dribbble.com/shots/1285240-Freebie-Flat-Pricing-Table?list=tags&tag=pricing_table
*/

/*--------- Font ------------*/
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*------ utiltity classes -----*/
.fl{ float:left; }
.fr{ float: right; }
/*its also known as clearfix*/
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1;  /*For IE 6/7 (trigger hasLayout) */
}

body {
    background: #F2F2F2;
    font-family: 'Droid Sans', sans-serif;
    line-height: 1;
    font-size: 16px;    
}
.wrapper {
    
}
.pricing-table {
    width: 80%;
    margin: 50px auto;
    text-align: center;
    padding: 10px;
    padding-right: 0;
}
.pricing-table .heading{
    color: #9C9E9F;
    text-transform: uppercase;
    font-size: 1.3rem;
    margin-bottom: 4rem;
}
.block{
    width: 30%;    
    margin: 0 15px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;    
/*    border: 1px solid red;*/
}
/*Shared properties*/
.title,.pt-footer{
    color: #FEFEFE;
    text-transform: capitalize;
    line-height: 2.5;
    position: relative;
}
.content{
    position: relative;
    color: #FEFEFE;
    padding: 20px 0 10px 0;
}
/*arrow creation*/
.content:after, .content:before,.pt-footer:before,.pt-footer:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.pt-footer:after,.pt-footer:before{
    top:0;
}
.content:after,.pt-footer:after {
	border-color: rgba(136, 183, 213, 0);	
	border-width: 5px;
	margin-left: -5px;
}
/*/arrow creation*/
.price{
    position: relative;
    display: inline-block;
    margin-bottom: 0.625rem;
}
.price span{    
    font-size: 6rem;
    letter-spacing: 8px;
    font-weight: bold;        
}
.price sup{
    font-size: 1.5rem;    
    position: absolute;    
    top: 12px;
    left: -12px;
}
.hint{
    font-style: italic;
    font-size: 0.9rem;
}
.features{
    list-style-type: none;    
    background: #FFFFFF;
    text-align: left;
    color: #9C9C9C;
    padding:30px 22%;
    font-size: 0.9rem;
}
.features li{
    padding:15px 0;
    width: 100%;
}
.features li span{
   padding-right: 0.4rem; 
}
.pt-footer{
    font-size: 0.95rem;
    text-transform: capitalize;
}
/*PERSONAL*/
.personal .title{        
    background: #78CFBF;    
}
.personal .content,.personal .pt-footer{
    background: #82DACA;
}
.personal .content:after{	
	border-top-color: #82DACA;	
}
.personal .pt-footer:after{
    border-top-color: #FFFFFF;
}
/*PROFESSIONAL*/
.professional .title{
    background: #3EC6E0;
}
.professional .content,.professional .pt-footer{
    background: #53CFE9;
}
.professional .content:after{	
	border-top-color: #53CFE9;	
}
.professional .pt-footer:after{
    border-top-color: #FFFFFF;
}
/*BUSINESS*/
.business .title{
    background: #E3536C;
}
.business .content,.business .pt-footer{
    background: #EB6379;
}
.business .content:after{	
	border-top-color: #EB6379;	
}
.business .pt-footer:after {	
	border-top-color: #FFFFFF;	
}
</style>
</head>
  <body>
    <div class="wrapper">
        <!-- PRICING-TABLE CONTAINER -->
        <div class="pricing-table group">
            <h1 class="heading">
                Pricing overview
            </h1>
            <!-- PERSONAL -->
            <div class="block personal fl">
                <h2 class="title">personal</h2>
                <!-- CONTENT -->
                <div class="content">
                    <p class="price">
                        <sup>$</sup>
                        <span>29</span>
                        <sub>/mo.</sub>
                    </p>
                    <p class="hint">Perfect for freelancers</p>
                </div>
                <!-- /CONTENT -->
                <!-- FEATURES -->
                <ul class="features">
                    <li><span class="fontawesome-cog"></span>1 WordPress Install</li>
                    <li><span class="fontawesome-star"></span>25,000 visits/mo.</li>
                    <li><span class="fontawesome-dashboard"></span>Unlimited Data Transfer</li>
                    <li><span class="fontawesome-cloud"></span>10GB Local Storage</li>
                </ul>
                <!-- /FEATURES -->
                <!-- PT-FOOTER -->
                <div class="pt-footer">
                    <p>Host My Website</p>
                </div>
                <!-- /PT-FOOTER -->
            </div>
            <!-- /PERSONAL -->
            <!-- PROFESSIONAL -->
            <div class="block professional fl">
                <h2 class="title">Professional</h2>
                <!-- CONTENT -->
                <div class="content">
                    <p class="price">
                        <sup>$</sup>
                        <span>99</span>
                        <sub>/mo.</sub>
                    </p>
                    <p class="hint">Suitable for startups</p>
                </div>
                <!-- /CONTENT -->
                <!-- FEATURES -->
                <ul class="features">
                    <li><span class="fontawesome-cog"></span>10 WordPress Install</li>
                    <li><span class="fontawesome-star"></span>100,000 visits/mo.</li>
                    <li><span class="fontawesome-dashboard"></span>Unlimited Data Transfer</li>
                    <li><span class="fontawesome-cloud"></span>20GB Local Storage</li>
                </ul>
                <!-- /FEATURES -->
                <!-- PT-FOOTER -->
                <div class="pt-footer">
                    <p>Host My Website</p>
                </div>
                <!-- /PT-FOOTER -->
            </div>
            <!-- /PROFESSIONAL -->
            <!-- BUSINESS -->
            <div class="block business fl">
                <h2 class="title">Business</h2>
                <!-- CONTENT -->
                <div class="content">
                    <p class="price">
                        <sup>$</sup>
                        <span>249</span>
                        <sub>/mo.</sub>
                    </p>
                    <p class="hint">For established business</p>
                </div>
                <!-- /CONTENT -->

                <!-- FEATURES -->
                <ul class="features">
                    <li><span class="fontawesome-cog"></span>25 WordPress Install</li>
                    <li><span class="fontawesome-star"></span>400,000 visits/mo.</li>
                    <li><span class="fontawesome-dashboard"></span>Unlimited Data Transfer</li>
                    <li><span class="fontawesome-cloud"></span>30GB Local Storage</li>
                </ul>
                <!-- /FEATURES -->

                <!-- PT-FOOTER -->
                <div class="pt-footer">
                    <p>Host My Website</p>
                </div>
                <!-- /PT-FOOTER -->
            </div>
            <!-- /BUSINESS -->
        </div>
        <!-- /PRICING-TABLE -->
    </div>
</body>
</html>

4. By Arkev

Made by Arkev. Minimalistic CSS3 Pricing table. Source

css pricing table by arkev
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body{
  background: #303030;
}

#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 892px; /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);        
	background: #fff;      
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
	float: left;
	position: relative;
}

#pricing-table #most-popular {
	z-index: 2;
	top: -13px;
	border-width: 3px;
	padding: 30px 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
}

#pricing-table .plan:nth-child(1) {
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;        
}

#pricing-table .plan:nth-child(4) {
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;        
}

/* --------------- */	

#pricing-table h3 {
	font-size: 20px;
	font-weight: normal;
	padding: 20px;
	margin: -20px -20px 50px -20px;
	background-color: #eee;
	background-image: -moz-linear-gradient(#fff,#eee);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
	background-image: -webkit-linear-gradient(#fff, #eee);
	background-image: -o-linear-gradient(#fff, #eee);
	background-image: -ms-linear-gradient(#fff, #eee);
	background-image: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
	background-color: #ddd;
	background-image: -moz-linear-gradient(#eee,#ddd);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));    
	background-image: -webkit-linear-gradient(#eee, #ddd);
	background-image: -o-linear-gradient(#eee, #ddd);
	background-image: -ms-linear-gradient(#eee, #ddd);
	background-image: linear-gradient(#eee, #ddd);
	margin-top: -30px;
	padding-top: 30px;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0; 		
}

#pricing-table .plan:nth-child(1) h3 {
	-moz-border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	border-radius: 5px 0 0 0;       
}

#pricing-table .plan:nth-child(4) h3 {
	-moz-border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;       
}	

#pricing-table h3 span {
	display: block;
	font: bold 25px/100px Georgia, Serif;
	color: #777;
	background: #fff;
	border: 5px solid #fff;
	height: 100px;
	width: 100px;
	margin: 10px auto -65px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
}

#pricing-table li {
	border-top: 1px solid #ddd;
	padding: 10px 0;
}

/* --------------- */
	
#pricing-table .signup {
	position: relative;
	padding: 8px 20px;
	margin: 20px 0 0 0;  
	color: #fff;
	font: bold 14px Arial, Helvetica;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;       
	background-color: #72ce3f;
	background-image: -moz-linear-gradient(#72ce3f, #62bc30);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));    
	background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
	background-image: -o-linear-gradient(#72ce3f, #62bc30);
	background-image: -ms-linear-gradient(#72ce3f, #62bc30);
	background-image: linear-gradient(#72ce3f, #62bc30);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;     
	text-shadow: 0 1px 0 rgba(0,0,0,.3);        
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#pricing-table .signup:hover {
	background-color: #62bc30;
	background-image: -moz-linear-gradient(#62bc30, #72ce3f);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));      
	background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
	background-image: -o-linear-gradient(#62bc30, #72ce3f);
	background-image: -ms-linear-gradient(#62bc30, #72ce3f);
	background-image: linear-gradient(#62bc30, #72ce3f); 
}

#pricing-table .signup:active, #pricing-table .signup:focus {
	background: #62bc30;       
	top: 2px;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; 
}

/* --------------- */

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}

.clear {
  zoom:1
}
</style>
<body>
  <div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="">Sign up</a>         
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
			<li><b>Unlimited</b> subdomains</li>			
        </ul> 
    </div>
    <div class="plan" id="most-popular">
        <h3>Professional<span>$29</span></h3>
        <a class="signup" href="">Sign up</a>        
        <ul>
            <li><b>5GB</b> Disk Space</li>
            <li><b>50GB</b> Monthly Bandwidth</li>
            <li><b>10</b> Email Accounts</li>
			<li><b>Unlimited</b> subdomains</li>			
        </ul>    
    </div>
    <div class="plan">
        <h3>Standard<span>$17</span></h3>
		<a class="signup" href="">Sign up</a>
        <ul>
            <li><b>3GB</b> Disk Space</li>
            <li><b>25GB</b> Monthly Bandwidth</li>
            <li><b>5</b> Email Accounts</li>
			<li><b>Unlimited</b> subdomains</li>			
        </ul>
    </div>
    <div class="plan">
        <h3>Basic<span>$9</span></h3>
        <a class="signup" href="">Sign up</a>		
        <ul>
            <li><b>1GB</b> Disk Space</li>
            <li><b>10GB</b> Monthly Bandwidth</li>
            <li><b>2</b> Email Accounts</li>
			<li><b>Unlimited</b> subdomains</li>			
        </ul>
    </div> 	
</div>
</body>
</html>

5. By Chris Frees

Made by Chris Frees. Another flat pricing table with no effects. Source

css pricing table by chris frees
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif:400,700);
* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  text-align: center;
  background-color: #5d4660;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5D4660', endColorstr='#FFF7EEC7');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkNDY2MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZWVjNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5d4660), color-stop(100%, #f7eec7));
  background-image: -moz-linear-gradient(top, #5d4660 0%, #f7eec7 100%);
  background-image: -webkit-linear-gradient(top, #5d4660 0%, #f7eec7 100%);
  background-image: linear-gradient(to bottom, #5d4660 0%, #f7eec7 100%);
  font-family: 'Droid Sans', sans-serif;
}

.wrap {
  width: 800px;
  margin: 0 auto;
  text-align: left;
  color: #989A8F;
}

.table {
  background-color: #ffffff;
  height: 325px;
  width: 100%;
  margin-top: 50px;
}

ul li {
  float: left;
  width: 199px;
  text-align: center;
  border-left: 1px solid #DDDCD8;
}

.top {
  background-color: #EAE9E4;
  height: 75px;
}
.top h1 {
  padding-top: 20px;
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  font-size: 20px;
  color: #fff;
  line-height: 60px;
  text-align: center;
  background: #989A8F;
  margin-left: 70px;
  margin-top: 10px;
}

.bottom {
  margin-top: 50px;
}
.bottom p {
  font-size: 13px;
  font-family: 'Droid Serif', sans-serif;
  padding: 5px;
}
.bottom p span {
  font-weight: bold;
}

.sign {
  margin-top: 50px;
}
.sign .button {
  border: 1px solid #989A8F;
  padding: 10px 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  color: #989A8F;
  font-size: 14px;
  text-decoration: none;
  vertical-align: middle;
  font-size: 17px;
}

.purple {
  background-color: #5D4660;
}

.white {
  color: #FFFFFF;
}

.pink {
  background-color: #BC9B94;
}
</style>
</head>
<body>
  <div class="wrap">
<div class="table">
<ul>
  
<li>
  <div class="top">
    <h1>STARTER</h1>
    <div class="circle">$19</div>
  </div>
  <div class="bottom">
    <p><span>5</span> users</p>
    <p><span>10</span> projects</p>
    <p><span>10GB</span> amount of space</p>
    <p><span>5</span> e-mail accounts</p>
    <div class="sign">
    <a href='#' class='button'>SIGN UP</a>
    </div>
  </div>
</li>
  
<li>
  <div class="top">
    <h1>BASIC</h1>
    <div class="circle">$29</div>
  </div>
    <div class="bottom">
    <p><span>10</span> users</p>
    <p><span>50</span> projects</p>
    <p><span>50GB</span> amount of space</p>
    <p><span>10</span> e-mail accounts</p>
    <div class="sign">
    <a href='#' class='button'>SIGN UP</a>
    </div>
  </div>
</li>
  
<li>
  <div class="top purple white">
    <h1>PRO</h1>
    <div class="circle pink">$49</div>
  </div>
    <div class="bottom">
    <p><span>100</span> users</p>
    <p><span>Unlimited</span> projects</p>
    <p><span>1TB</span> amount of space</p>
    <p><span>100</span> e-mail accounts</p>
    <div class="sign">
    <a href='#' class="button purple" style="color:white;">SIGN UP</a>
    </div>
  </div>
</li>
  
<li>
  <div class="top">
    <h1>ULTRA</h1>
    <div class="circle">$99</div>
  </div>
    <div class="bottom">
    <p><span>Unlimited</span> users</p>
    <p><span>Unlimited</span> projects</p>
    <p><span>Unlimited</span> amount of space</p>
    <p><span>Unlimited</span> e-mail accounts</p>
    <div class="sign">
    <a href='#' class='button'>SIGN UP</a>
    </div>
  </div>
</li>
  
</ul>
</div>
</div>
</body>
</html>

6. By Andy Tran

Made by Andy Tran. Pricing table with click to expand feature. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
   
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'>
<link rel='stylesheet' href='https://daneden.github.io/animate.css/animate.min.css'>
  
<style>
body {
  background: #DF4F32 url("https://33.media.tumblr.com/53b1b2ec56944c977cdd7ee10a9b4ba4/tumblr_n8zm0yzydj1st5lhmo1_1280.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  content: '';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  background: #DF4F32;
  /* IE Fallback */
  background: rgba(44, 62, 80, 0.9);
  width: 100%;
  height: 100%;
}
.pricing {
  position: absolute;
  background: #3498db;
  width: 280px;
  top: 50%;
  left: 50%;
  margin: -117px 0 0 -140px;
  padding: 40px 0 20px;
  color: #fff;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.pricing .thumbnail {
  background: #fff;
  /* IE Fall */
  background: rgba(255, 255, 255, 0.2);
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  font-size: 36px;
  line-height: 90px;
  text-align: center;
}
.pricing .title {
  cursor: pointer;
  background: #2980b9;
  margin: 40px 0 0;
  padding: 10px;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
}
.pricing .content {
  display: none;
}
.pricing .content .sub-title {
  background: #eee;
  padding: 10px;
  color: #666;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.pricing .content ul {
  list-style: none;
  background: #fff;
  margin: 0;
  padding: 0;
  color: #666;
  font-size: 14px;
}
.pricing .content ul li {
  padding: 10px 20px;
}
.pricing .content ul li:nth-child(2n) {
  background: #f3f3f3;
}
.pricing .content ul li .fa {
  width: 16px;
  margin-right: 10px;
  text-align: center;
}
.pricing .content ul li .fa-check {
  color: #2ecc71;
}
.pricing .content ul li .fa-close {
  color: #e74c3c;
}
.pricing .content a {
  display: block;
  background: #2980b9;
  max-width: 80px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 10px 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}
.pricing .content a:hover {
  background: #34495e;
  /* IE Fallback */
  background: rgba(52, 73, 94, 0.7);
}
.clickMe {
  background: #fff;
  /* IE Fallback */
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 180px;
  left: -60px;
  padding: 5px 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #3498db;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
}
.clickMe:before {
  content: '';
  position: absolute;
  top: 6px;
  right: -5px;
  width: 0px;
  height: 0px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5 solid #fff;
  /* IE Fallback */
  border-left: 5px solid rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
  <div class='pricing animated swing'>
  <div class='thumbnail animated pulse infinite'>
    <div class='fa fa-paper-plane'></div>
  </div>
  <div class='title'>
    Paper Package
  </div>
  <div class='content'>
    <div class='sub-title'>
      $69
      <i>per year</i>
    </div>
    <ul>
      <li>
        <div class='fa fa-check'></div>
        Complete Access To All Themes
      </li>
      <li>
        <div class='fa fa-check'></div>
        Perpetual Theme Updates
      </li>
      <li>
        <div class='fa fa-check'></div>
        Premium Technical Support
      </li>
      <li>
        <div class='fa fa-close'></div>
        Complete Access To All Plugins
      </li>
      <li>
        <div class='fa fa-close'></div>
        Layered Photoshop Files
      </li>
      <li>
        <div class='fa fa-close'></div>
        No Yearly Fees
      </li>
    </ul>
    <a href='https://www.elegantthemes.com/cgi-bin/members/register.cgi?sub=16'>
      Sign Up
    </a>
  </div>
  <div class='clickMe'>
    Click
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(".title").click(function () {
  $(".content").slideToggle();
});
    </script>
</body>
</html>

7. By Jdm

Made by Jdm. Hover to Reveal pricing table. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
body {
  background: #ddd;
}

sup {
  top: -.4em;
}

.pricing-container {
  width: 300px;
  text-align: center;
  font-family: 'Open Sans Condensed', sans-serif;
  position: absolute;
  margin-left: -150px;
  left: 50%;
  bottom: 0;
}
.pricing-container .header {
  background: #2F2F2F;
  color: white;
  padding: 25px;
  font-size: 2.5em;
  font-weight: 300;
  border-radius: 5px 5px 0 0;
}
.pricing-container .price {
  background: #66D2AC;
  background: linear-gradient(10deg, #93da9f 30%, #66d2ac 80%);
  color: white;
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  font-size: 1.3em;
}
.pricing-container .price .figure {
  font-weight: 800;
  font-size: 1.2em;
  margin: 0 2px;
}
.pricing-container .price .cent {
  text-decoration: underline;
}
.pricing-container .price .frequency {
  color: #2F757F;
  text-shadow: none;
}
.pricing-container .price:hover .details {
  height: 20px;
}
.pricing-container .price .details {
  color: #2F757F;
  font-size: .6em;
  display: block;
  height: 0;
  overflow: hidden;
  transition: all 400ms ease;
}
.pricing-container .itemsWrapper {
  border: 1px solid #E6E6E6;
  border-top: none;
  border-radius: 0 0 2px 2px;
  background: white;
  box-shadow: inset 14px 0 white, inset 15px 0 #f2f2f2, inset -14px 0 white, inset -15px 0 #f2f2f2;
}
.pricing-container .itemsWrapper .items {
  list-style: none;
  padding: 15px;
  margin: 0;
}
.pricing-container .itemsWrapper .item {
  padding: 7px;
  text-transform: capitalize;
}
</style>
</head>
<body>
  <div class="pricing-container">
  <div class="header">
    Premium
  </div>
  <div class="price">
    <span>
      <sup class="currency">$</sup><span class="figure">39</span> <sup class="cent">99</sup> <sup class="frequency">monthly</sup>
    </span>
    <div class='details'>based on 1 yr</div>
  </div>
<div class="itemsWrapper">
  <ul class="items">
    <li class='item'>Full Access</li>
    <li class="item"><b>Unlimited</b> Pizza</li>
    <li class="item"><b>Free</b> Beer</li>
        <li class="item">2 free forks every months</li>
    <li class="item"><b>Unlimited</b> Burger</li>
    <li class="item"><b>Daft Punk</b> every evenings</li>

    <li class="item"><b>Free</b> domain name</li>
  </ul>
</div>
</div>
</body>
</html>

8. By Agustin Ortiz

Made by Agustin Ortiz. Pricing table with simple hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

  
<style>
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #2e2a2a;
	color: #FFF;
	font-size: 62.5%;
	font-family: 'Roboto', Arial, Helvetica, Sans-serif, Verdana;
}

ul {
	list-style-type: none;
}

a {
	color: #e95846;
	text-decoration: none;
}

.pricing-table-title {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 2.6em;
	color: #FFF;
	margin-top: 15px;
	text-align: left;
	margin-bottom: 25px;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.pricing-table-title a {
	font-size: 0.6em;
}

.clearfix:after {
	content: '';
	display: block;
	height: 0;
	width: 0;
	clear: both;
}
/** ========================
 * Contenedor
 ============================*/
.pricing-wrapper {
	width: 960px;
	margin: 40px auto 0;
}

.pricing-table {
	margin: 0 10px;
	text-align: center;
	width: 300px;
	float: left;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.4);
	box-shadow: 0 0 15px rgba(0,0,0,0.4);
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.pricing-table:hover {
	-webkit-transform: scale(1.06);
	-ms-transform: scale(1.06);
	-o-transform: scale(1.06);
	transform: scale(1.06);
}

.pricing-title {
	color: #FFF;
	background: #e95846;
	padding: 20px 0;
	font-size: 2em;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.pricing-table.recommended .pricing-title {
	background: #2db3cb;
}

.pricing-table.recommended .pricing-action {
	background: #2db3cb;
}

.pricing-table .price {
	background: #403e3d;
	font-size: 3.4em;
	font-weight: 700;
	padding: 20px 0;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.pricing-table .price sup {
	font-size: 0.4em;
	position: relative;
	left: 5px;
}

.table-list {
	background: #FFF;
	color: #403d3a;
}

.table-list li {
	font-size: 1.4em;
	font-weight: 700;
	padding: 12px 8px;
}

.table-list li:before {
	content: "\f00c";
	font-family: 'FontAwesome';
	color: #3fab91;
	display: inline-block;
	position: relative;
	right: 5px;
	font-size: 16px;
} 

.table-list li span {
	font-weight: 400;
}

.table-list li span.unlimited {
	color: #FFF;
	background: #e95846;
	font-size: 0.9em;
	padding: 5px 7px;
	display: inline-block;
	-webkit-border-radius: 38px;
	-moz-border-radius: 38px;
	border-radius: 38px;
}


.table-list li:nth-child(2n) {
	background: #F0F0F0;
}

.table-buy {
	background: #FFF;
	padding: 15px;
	text-align: left;
	overflow: hidden;
}

.table-buy p {
	float: left;
	color: #37353a;
	font-weight: 700;
	font-size: 2.4em;
}

.table-buy p sup {
	font-size: 0.5em;
	position: relative;
	left: 5px;
}

.table-buy .pricing-action {
	float: right;
	color: #FFF;
	background: #e95846;
	padding: 10px 16px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-weight: 700;
	font-size: 1.4em;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.table-buy .pricing-action:hover {
	background: #cf4f3e;
}

.recommended .table-buy .pricing-action:hover {
	background: #228799;	
}

/** ================
 * Responsive
 ===================*/
 @media only screen and (min-width: 768px) and (max-width: 959px) {
 	.pricing-wrapper {
 		width: 768px;
 	}

 	.pricing-table {
 		width: 236px;
 	}
	
	.table-list li {
		font-size: 1.3em;
	}

 }

 @media only screen and (max-width: 767px) {
 	.pricing-wrapper {
 		width: 420px;
 	}

 	.pricing-table {
 		display: block;
 		float: none;
 		margin: 0 0 20px 0;
 		width: 100%;
 	}
 }

@media only screen and (max-width: 479px) {
	.pricing-wrapper {
		width: 300px;
	}
}
</style>
</head>
<body>
	<div class="pricing-wrapper clearfix">
		<h1 class="pricing-table-title">CSS Pricing Table <a href="http://creaticode.com">Creaticode.com</a></h1>

		<div class="pricing-table">
			<h3 class="pricing-title">Basic</h3>
			<div class="price">$60<sup>/ mes</sup></div>
			<ul class="table-list">
				<li>10 GB <span>Storage</span></li>
<li>1 Domain <span>included</span></li>
<li>25 GB <span>Monthly transfer</span></li>
<li>Database <span class="unlimited">unlimited</span></li>
<li>Email accounts <span class="unlimited">unlimited</span></li>
<li>CPanel <span>included</span></li>
			</ul>
			<div class="table-buy">
				<p>$60<sup>/ mes</sup></p>
				<a href="#" class="pricing-action">Compare</a>
			</div>
		</div>
		
		<div class="pricing-table recommended">
			<h3 class="pricing-title">Premium</h3>
			<div class="price">$100<sup>/ mes</sup></div>
			<ul class="table-list">
				<li>35 GB <span>Storage</span></li>
<li>5 Domains <span>included</span></li>
<li>100 GB <span>Monthly transfer</span></li>
<li>Database <span class="unlimited">unlimited</span></li>
<li>Email accounts <span class="unlimited">unlimited</span></li>
<li>CPanel <span>included</span></li>
			</ul>
			<div class="table-buy">
				<p>$100<sup>/ mes</sup></p>
				<a href="#" class="pricing-action">Compare</a>
			</div>
		</div>

		<div class="pricing-table">
			<h3 class="pricing-title">Ultimate</h3>
			<div class="price">$200<sup>/ mes</sup></div>
			<ul class="table-list">
				<li>100 GB <span>Storage</span></li>
<li>8 Domains <span>included</span></li>
<li>200 GB <span>Monthly transfer</span></li>
<li>Database <span class="unlimited">unlimited</span></li>
<li>Email accounts <span class="unlimited">unlimited</span></li>
<li>CPanel <span>included</span></li>
			</ul>
			<div class="table-buy">
				<p>$200<sup>/ mes</sup></p>
				<a href="#" class="pricing-action">Compare</a>
			</div>
		</div>
	</div>
</body>
</html>

9. By Digimad Media

Made by Digimad Media. Responsive css pricing table design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background: #F8F8F8;
}

a {
  text-decoration: none;
}

h1 {
  text-align: center;
  font-family: "Lato", sans-serif;
  font-size: 25px;
  line-height: 32px;
  padding-top: 70px;
}
h1 a {
  color: #66CCCC;
}

.price-table-wrapper {
  font-family: "Lato", sans-serif;
  text-align: center;
  margin-top: 30px;
}
.price-table-wrapper .featured-table {
  box-shadow: 0px 0px 19px -3px rgba(0, 0, 0, 0.36);
}
.price-table-wrapper .pricing-table {
  display: inline-block;
  border: 1px solid #C8C8C8;
  border-radius: 10px;
  background: white;
  margin: 20px;
  transition: all 0.3s ease-in-out;
}
.price-table-wrapper .pricing-table__header {
  padding: 20px;
  font-size: 20px;
  color: #909090;
  background: #E0E0E0;
}
.price-table-wrapper .pricing-table__price {
  color: #66CCCC;
  padding: 20px;
  margin: auto;
  font-size: 40px;
  font-weight: 500;
}
.price-table-wrapper .pricing-table__button {
  display: block;
  background: #66CCCC;
  text-decoration: none;
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.price-table-wrapper .pricing-table__button:before {
  position: absolute;
  left: -20%;
  top: -10%;
  content: "";
  width: 60%;
  height: 220%;
  transform: rotate(-30deg);
  background: white;
  opacity: 0.3;
  transition: all 0.3s ease-in-out;
}
.price-table-wrapper .pricing-table__button:after {
  position: absolute;
  content: ">";
  top: 0;
  right: 0;
  font-size: 25px;
  padding: 15px;
  padding-right: 40px;
  color: white;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.price-table-wrapper .pricing-table__button:hover {
  background: black;
}
.price-table-wrapper .pricing-table__list {
  padding: 20px;
  color: #A0A0A0;
}
.price-table-wrapper .pricing-table__list li {
  padding: 15px;
  border-bottom: 1px solid #C8C8C8;
}
.price-table-wrapper .pricing-table__list li:last-child {
  border: none;
}
.price-table-wrapper .pricing-table:hover {
  box-shadow: 0px 0px 19px -3px rgba(0, 0, 0, 0.36);
}
.price-table-wrapper .pricing-table:hover .pricing-table__button {
  padding-left: 0;
  padding-right: 35px;
}
.price-table-wrapper .pricing-table:hover .pricing-table__button:before {
  top: -80%;
  transform: rotate(0deg);
  width: 100%;
}
.price-table-wrapper .pricing-table:hover .pricing-table__button:after {
  opacity: 1;
  padding-right: 15px;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,100' rel='stylesheet' type='text/css'>

<h1>RESPONSIVE PRICING TABLE DESIGN <br> BY <a target="blank" href="#">DIGIMAD MEDIA</h1>

<div class="price-table-wrapper">
  <div class="pricing-table">
    <h2 class="pricing-table__header">- BASIC -</h2>
    <h3 class="pricing-table__price">ยฃ50</h3>
    <a target="_blank" class="pricing-table__button" href="#">
      Join Now!
    </a>
    <ul class="pricing-table__list">
      <li>30 day free trial</li>
      <li>50gb storage space</li>
      <li>20% discount</li>
      <li>24 hour support</li>
    </ul>
  </div>
  <div class="pricing-table featured-table">
    <h2 class="pricing-table__header">- BUSINESS -</h2>
    <h3 class="pricing-table__price">ยฃ80</h3>
    <a target="_blank" class="pricing-table__button" href="#">
      Join Now!
    </a>
    <ul class="pricing-table__list">
      <li>40 day free trial</li>
      <li>100gb storage space</li>
      <li>25% discount</li>
      <li>24 hour support</li>
    </ul>
  </div>
  <div class="pricing-table">
    <h2 class="pricing-table__header">- PREMIUM -</h2>
    <h3 class="pricing-table__price">ยฃ130</h3>
    <a target="_blank" class="pricing-table__button" href="#">
      Join Now!
    </a>
    <ul class="pricing-table__list">
      <li>50 day free trial</li>
      <li>200gb storage space</li>
      <li>40% discount</li>
      <li>24 hour support</li>
    </ul>
  </div>
</div>
</body>
</html>

10. By Aladin Bensassi

Made by Aladin Bensassi. Source

css pricing table by aladin bensassi

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
/* General */
h1,h2,h3,h4,h5,h6{cursor:pointer;}

/* Intro */

.intro{
  width:100%;
  height:30px;
}
.intro h1{
  font-family:'Oswald', sans-serif;
  letter-spacing:2px;
  font-weight:normal;
  font-size:14px;
  color:#fff;
  text-align:center;
  margin-top:10px;
}
.intro a{
  color:#fff;
  font-weight:bold;
  letter-spacing:0;
}
.intro img{
  width:20px;
  heght:20px;
  margin-left:5px;
  margin-right:5px;
  position:relative;
  top:5px;
}

/* Body */
body{
  font-family: arial, verdana;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background:#e74c3c;
}
#container{
  width:80%;
  min-width:1100px;
  min-height:500px;
  margin:3% auto 0 auto;
}
.pricetab{
  width:20%;
  min-width:220px;
  background: linear-gradient(#555, #444);
  float:left;
  margin-top:.2%;
  box-shadow:1px 1px 5px rgba(0, 0, 0, .5);
}
.pricetabmid{
  width:20%;
  min-width:220px;
  background: linear-gradient( #F9B84A, #ff9547);
  float:left;
  box-shadow:0 0  15px rgba(0, 0, 0, 1);
  position:relative;
}
.priceheader{
  width:100%;
  height:60px;
  background-image: -o-linear-gradient(bottom ,#444 , #555); 
  background-image: -webkit-linear-gradient(bottom ,#444 , #555);
  background-image: -o-linear-gradient(bottom ,#444 , #555); 
  background-image: -moz-linear-gradient(bottom ,#444 , #555); 
  background-image: linear-gradient(to bottom , #444 , #555); 
  box-shadow:0 2px 12px rgba(0, 0, 0, .5);
}
.price{
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid #ff9547;
  margin:5% auto 0 auto;
  text-align:center;
}
.pricemid{
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid #444;
  margin:5% auto 0 auto;
  text-align:center;
}
.infos{
  margin-top:10%;
}
.pricefooter{
  width:100%;
  height:50px;
  margin-top:10%;
  background:#333; 
}
.pricefootermid{
  width:100%;
  height:50px;
  margin-top:10%;
  background:#fe9040; 
}
.author{
  width:10%;
  min-width:150px;
  height:40px;
  background:rgba(0, 0, 0, .5);
  overflow:hidden;
  clear:both;
  float:right;
  position:fixed;
  bottom:0;
  right:0;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.author:hover{
  background:rgba(0, 0, 0, .8);
}
.author:hover .credit{
  margin-left:10%;
}
/* Typo */ 
.title{
  font-family:arial;
  color:#fff;
  font-size:38px;
  font-weight:normal;
  text-align:center;
  text-transform:uppercase;
  text-shadow: 1px 2px 5px rgba(0,0,5,0.2);
  margin:auto;
}
h1{
  font-size:18px;
  color:#fff;
  text-align:center;
  line-height:3;
}
h2{
  text-align:center;
  font-size:42px;
  color:#fff;
}
sub{
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}
h3{
  font-size:14px;
  font-weight:normal;
  text-align:center;
  color:#fff;
  line-height:1;
}
.button a{
  color:#fff;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  line-height:3;
}
.buttonmid a{
  color:#fff;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  line-height:3;
}
.credit{
  font-family:arial;
  color:#fff;
  font-size:16px;
  font-weight:normal;
  text-align:left;
  text-shadow: 1px 2px 5px rgba(0,0,5,0.2);
  margin-left:5%;
  line-height:1.3;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
/* Buttons */ 
.button{
  width:50%;
  height:50px;
  margin:0 auto 0 auto;
  background:#ff9547;
  text-align:center; 
  cursor:pointer;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:hover{
  width:60%;
}
.buttonmid{
  width:50%;
  height:50px;
  margin:0 auto 0 auto;
  background:#333;
  text-align:center; 
  cursor:pointer;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.buttonmid:hover{
  width:60%;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<body>
  <div class="intro">
  <h1> Follow me on <a href="https://twitter.com/BenSassiAladin" target="_blank"><img src="http://vignette1.wikia.nocookie.net/dusktilldawn/images/1/1a/Twitter_logo.png/revision/latest?cb=20140507210836">Twitter</a> or <a href="https://tn.linkedin.com/in/aladinbensassi" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/768px-LinkedIn_logo_initials.png">LinkedIn</a> for constant updates </h1>
</div>
  <h1 class="title"> Pricing table </h1>
  <div id="container">
    <div class="pricetab">
      <h1> FREE </h1>
      <div class="price"> 
        <h2> Free </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 0 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 1 month support</h3>
      </div>
      <div class="pricefooter">
        <div class="button">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
    <div class="pricetab">
      <h1> STARTER </h1>
      <div class="price"> 
        <h2> 10$ </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 5 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 2 months support</h3>
      </div>
      <div class="pricefooter">
        <div class="button">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
    <div class="pricetabmid">
      <h1> BASIC </h1>
      <div class="pricemid"> 
        <h2> 30$ </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 20 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 6 months support</h3>
      </div>
      <div class="pricefootermid">
        <div class="buttonmid">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
    <div class="pricetab">
      <h1> PREMIUM </h1>
      <div class="price"> 
        <h2> 50$ </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 30 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 1 year support</h3>
      </div>
      <div class="pricefooter">
        <div class="button">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
    <div class="pricetab">
      <h1> VIP </h1>
      <div class="price"> 
        <h2> 100$ </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 50 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 2 years support</h3>
      </div>
      <div class="pricefooter">
        <div class="button">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

11. By Robin Brons

Made by Robin Brons. Simple CSS Price table. Source

css pricing table by robin brons
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<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>
</head>
<body>
  <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>
</body>
</html>

12. By jamal hassonui

Made by jamal hassonui. Pricing table ui. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - pricing table ui</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

<style>
/* by Jamal Hassouni*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
body{
  margin: 0;
  padding: 0;
 font-family: 'Roboto', sans-serif !important;
}
section{
  width: 100%;
  height: 100vh;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
          padding: 140px 0;
}
.card{
  position: relative;
  max-width: 300px;
  height: auto;
  background: linear-gradient(-45deg,#fe0847,#feae3f);
  border-radius: 15px;
  margin: 0 auto;
  padding: 40px 20px;
  -webkit-box-shadow: 0 10px 15px rgba(0,0,0,.1) ;
          box-shadow: 0 10px 15px rgba(0,0,0,.1) ;
-webkit-transition: .5s;
transition: .5s;
}
.card:hover{
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.col-sm-4:nth-child(1) .card ,
.col-sm-4:nth-child(1) .card .title .fa{
  background: linear-gradient(-45deg,#f403d1,#64b5f6);

}
.col-sm-4:nth-child(2) .card,
.col-sm-4:nth-child(2) .card .title .fa{
  background: linear-gradient(-45deg,#ffec61,#f321d7);

}
.col-sm-4:nth-child(3) .card,
.col-sm-4:nth-child(3) .card .title .fa{
  background: linear-gradient(-45deg,#24ff72,#9a4eff);

}
.card::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: rgba(255, 255, 255, .1);
z-index: 1;
-webkit-transform: skewY(-5deg) scale(1.5);
        transform: skewY(-5deg) scale(1.5);
}
.title .fa{
  color:#fff;
  font-size: 60px;
  width: 100px;
  height: 100px;
  border-radius:  50%;
  text-align: center;
  line-height: 100px;
  -webkit-box-shadow: 0 10px 10px rgba(0,0,0,.1) ;
          box-shadow: 0 10px 10px rgba(0,0,0,.1) ;

}
.title h2 {
  position: relative;
  margin: 20px  0 0;
  padding: 0;
  color: #fff;
  font-size: 28px;
 z-index: 2;
}
.price,.option{
  position: relative;
  z-index: 2;
}
.price h4 {
margin: 0;
padding: 20px 0 ;
color: #fff;
font-size: 60px;
}
.option ul {
  margin: 0;
  padding: 0;

}
.option ul li {
margin: 0 0 10px;
padding: 0;
list-style: none;
color: #fff;
font-size: 16px;
}
.card a {
  position: relative;
  z-index: 2;
  background: #fff;
  color : black;
  width: 150px;
  height: 40px;
  line-height: 40px;
  border-radius: 40px;
  display: block;
  text-align: center;
  margin: 20px auto 0 ;
  font-size: 16px;
  cursor: pointer;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .1);

}
.card a:hover{
    text-decoration: none;
}
</style>
</head>
<body>
<section>
  <div class="container-fluid">
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <div class="card text-center">
            <div class="title">
              <i class="fa fa-paper-plane" aria-hidden="true"></i>
              <h2>Basic</h2>
            </div>
            <div class="price">
              <h4><sup>$</sup>25</h4>
            </div>
            <div class="option">
              <ul>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 10 GB Space </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 3 Domain Names </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 20 Email Address </li>
              <li> <i class="fa fa-times" aria-hidden="true"></i> Live Support </li>
              </ul>
            </div>
            <a href="#">Order Now </a>
          </div>
        </div>
        <!-- END Col one -->
        <div class="col-sm-4">
          <div class="card text-center">
            <div class="title">
              <i class="fa fa-plane" aria-hidden="true"></i>
              <h2>Standard</h2>
            </div>
            <div class="price">
              <h4><sup>$</sup>50</h4>
            </div>
            <div class="option">
              <ul>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 50 GB Space </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 5 Domain Names </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited Email Address </li>
              <li> <i class="fa fa-times" aria-hidden="true"></i> Live Support </li>
              </ul>
            </div>
            <a href="#">Order Now </a>
          </div>
        </div>
        <!-- END Col two -->
        <div class="col-sm-4">
          <div class="card text-center">
            <div class="title">
              <i class="fa fa-rocket" aria-hidden="true"></i>
              <h2>Premium</h2>
            </div>
            <div class="price">
              <h4><sup>$</sup>100</h4>
            </div>
            <div class="option">
              <ul>
              <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited GB Space </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> 30 Domain Names </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited Email Address </li>
              <li> <i class="fa fa-check" aria-hidden="true"></i> Live Support </li>
              </ul>
            </div>
            <a href="#">Order Now </a>
          </div>
        </div>
        <!-- END Col three -->
      </div>
    </div>
  </div>
</section>
</body>
</html>

13. By LittleSnippets

Made by LittleSnippets. Source

css pricing table by littlesnippets
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://www.littlesnippets.net/css/codepen-result.css'>
  
<style>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
.snip1404 {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  width: 100%;
  max-width: 1000px;
  margin: 50px 10px;
}
.snip1404 img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: -1;
}
.snip1404 .plan {
  margin: 0;
  width: 25%;
  position: relative;
  float: left;
  overflow: hidden;
  border: 3px solid #442232;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: #5f3047;
}
.snip1404 .plan:hover i,
.snip1404 .plan.hover i {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.snip1404 .plan:first-of-type {
  border-radius: 8px 0 0 8px;
}
.snip1404 .plan:last-of-type {
  border-radius: 0 8px 8px 0;
}
.snip1404 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
.snip1404 header {
  background-color: #5f3047;
  color: #ffffff;
}
.snip1404 .plan-title {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  margin: 0;
  padding: 20px 20px 0;
  text-transform: uppercase;
  letter-spacing: 4px;
}
.snip1404 .plan-title:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 300px 0 0;
  border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.snip1404 .plan-cost {
  padding: 40px 20px 10px;
  text-align: right;
}
.snip1404 .plan-price {
  font-weight: 600;
  font-size: 3em;
}
.snip1404 .plan-type {
  opacity: 0.8;
  font-size: 0.7em;
  text-transform: uppercase;
}
.snip1404 .plan-features {
  padding: 0 0 20px;
  margin: 0;
  list-style: outside none none;
}
.snip1404 .plan-features li {
  padding: 8px 5%;
}
.snip1404 .plan-features i {
  margin-right: 8px;
  color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding: 20px;
  text-align: center;
}
.snip1404 .plan-select a {
  background-color: #442232;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 20px;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: inline-block;
}
.snip1404 .plan-select a:hover {
  background-color: #552a3f;
}
.snip1404 .featured {
  margin-top: -10px;
  border-color: #331926;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
  z-index: 1;
  border-radius: 8px;
}
.snip1404 .featured .plan-select {
  padding: 30px 20px;
}
@media only screen and (max-width: 767px) {
  .snip1404 .plan {
    width: 50%;
  }
  .snip1404 .plan-title,
  .snip1404 .plan-select a {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  .snip1404 .plan-select,
  .snip1404 .featured .plan-select {
    padding: 20px;
  }
  .snip1404 .featured {
    margin-top: 0;
  }
}
@media only screen and (max-width: 440px) {
  .snip1404 .plan {
    width: 100%;
  }
}
</style>
</head>
<body>
  <div class="snip1404">
  <div class="plan">
    <header>
      <h4 class="plan-title">
        Starter
      </h4>
      <div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
    </header>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
      <li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
      <li><i class="ion-checkmark"> </i>Unlimited Email</li>
      <li><i class="ion-checkmark"> </i>250Gb mo Transfer</li>
      <li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
      <li><i class="ion-checkmark"> </i>Daily Backups</li>
    </ul>
    <div class="plan-select"><a href="">Select Plan</a></div>
  </div>
  <div class="plan">
    <header>
      <h4 class="plan-title">
         
        Basic
      </h4>
      <div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
    </header>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
      <li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
      <li><i class="ion-checkmark"> </i>Unlimited Email</li>
      <li><i class="ion-checkmark"> </i>500Gb mo Transfer</li>
      <li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
      <li><i class="ion-checkmark"> </i>Daily Backups</li>
    </ul>
    <div class="plan-select"><a href="">Select Plan</a></div>
  </div>
  <div class="plan featured">
    <header>
      <h4 class="plan-title">
         
        Professional
      </h4>
      <div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
    </header>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
      <li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
      <li><i class="ion-checkmark"> </i>Unlimited Email</li>
      <li><i class="ion-checkmark"> </i>2000Gb mo Transfer</li>
      <li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
      <li><i class="ion-checkmark"> </i>Daily Backups</li>
    </ul>
    <div class="plan-select"><a href="">Select Plan</a></div>
  </div>
  <div class="plan">
    <header>
      <h4 class="plan-title">
         
        Ultra
      </h4>
      <div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
    </header>
    <ul class="plan-features">
      <li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
      <li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
      <li><i class="ion-checkmark"> </i>Unlimited Email</li>
      <li><i class="ion-checkmark"> </i>10000Gb mo Transfer</li>
      <li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
      <li><i class="ion-checkmark"> </i>Daily Backups</li>
    </ul>
    <div class="plan-select"><a href="">Select Plan</a></div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
/* Demo purposes only */
$(".hover").mouseleave(
function () {
  $(this).removeClass("hover");
});
    </script>
</body>
</html>