Demo for Simple Pricing Table Code with Shadow on Hover

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
}
h1.demo-title {
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #2A293E;
  letter-spacing: 2px;
}
h1.demo-title a {
  font-size: 16px;
  font-weight: 300;
}
.pricing-table {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
}
.pricing-table .ptable-item {
  width: 33.33%;
  padding: 0 15px;
  margin-bottom: 30px;
}
@media (max-width: 992px) {
  .pricing-table .ptable-item {
    width: 33.33%;
  }
}
@media (max-width: 768px) {
  .pricing-table .ptable-item {
    width: 50%;
  }
}
@media (max-width: 576px) {
  .pricing-table .ptable-item {
    width: 100%;
  }
}
.pricing-table .ptable-single {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.pricing-table .ptable-header,
.pricing-table .ptable-body,
.pricing-table .ptable-footer {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.pricing-table .ptable-status ,
.pricing-table .ptable-title,
.pricing-table .ptable-price,
.pricing-table .ptable-description,
.pricing-table .ptable-action {
  position: relative;
  width: 100%;
  text-align: center;
}
.pricing-table .ptable-single {
  background: #f6f8fa;
}
.pricing-table .ptable-single:hover {
  box-shadow: 0 0 10px #999999;
}
.pricing-table .ptable-header {
  margin: 0 30px;
  padding: 30px 0 45px 0;
  width: auto;
  background: #2A293E;
}
.pricing-table .ptable-header::before,
.pricing-table .ptable-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 100px solid #f6f8fa;
}
.pricing-table .ptable-header::before {
  right: 50%;
  border-right: 250px solid transparent;
}
.pricing-table .ptable-header::after {
  left: 50%;
  border-left: 250px solid transparent;
}
.pricing-table .ptable-item.featured-item .ptable-header {
  background: #FF6F61;
}
.pricing-table .ptable-status {
  margin-top: -30px;
}
.pricing-table .ptable-status span {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
  padding: 5px 0;
  text-align: center;
  color: #FF6F61;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  background: #2A293E;
}
.pricing-table .ptable-status span::before,
.pricing-table .ptable-status span::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 10px solid #FF6F61;
}
.pricing-table .ptable-status span::before {
  right: 50%;
  border-right: 25px solid transparent;
}
.pricing-table .ptable-status span::after {
  left: 50%;
  border-left: 25px solid transparent;
}
.pricing-table .ptable-title h2 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 2px;
}
.pricing-table .ptable-price h2 {
  margin: 0;
  color: #ffffff;
  font-size: 45px;
  font-weight: 700;
  margin-left: 15px;
}
.pricing-table .ptable-price h2 small {
  position: absolute;
  font-size: 18px;
  font-weight: 300;
  margin-top: 16px;
  margin-left: -15px;
}
.pricing-table .ptable-price h2 span {
  margin-left: 3px;
  font-size: 16px;
  font-weight: 300;
}
.pricing-table .ptable-body {
  padding: 20px 0;
}
.pricing-table .ptable-description ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing-table .ptable-description ul li {
  color: #2A293E;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 7px;
  border-bottom: 1px solid #dedede;
}
.pricing-table .ptable-description ul li:last-child {
  border: none;
}
.pricing-table .ptable-footer {
  padding-bottom: 30px;
}
.pricing-table .ptable-action a {
  display: inline-block;
  padding: 10px 20px;
  color: #FF6F61;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: none;
  background: #2A293E;
}
.pricing-table .ptable-action a:hover {
  color: #2A293E;
  background: #FF6F61;
}
.pricing-table .ptable-item.featured-item .ptable-action a {
  color: #2A293E;
  background: #FF6F61;
}
.pricing-table .ptable-item.featured-item .ptable-action a:hover {
  color: #FF6F61;
  background: #2A293E;
}
</style>

</head>
<body>
<div class="pricing-table">
  <div class="ptable-item">
    <div class="ptable-single">
      <div class="ptable-header">
        <div class="ptable-title">
          <h2>Silver</h2>
        </div>
        <div class="ptable-price">
          <h2><small>$</small>99<span>/ M</span></h2>
        </div>
      </div>
      <div class="ptable-body">
        <div class="ptable-description">
          <ul>
            <li>Pure HTML & CSS</li>
            <li>Responsive Design</li>
            <li>Well-commented Code</li>
            <li>Easy to Use</li>
          </ul>
        </div>
      </div>
      <div class="ptable-footer">
        <div class="ptable-action">
          <a href="">Buy Now</a>
        </div>
      </div>
    </div>
  </div>
  <div class="ptable-item featured-item">
    <div class="ptable-single">
      <div class="ptable-header">
        <div class="ptable-status">
          <span>Hot</span>
        </div>
        <div class="ptable-title">
          <h2>Gold</h2>
        </div>
        <div class="ptable-price">
          <h2><small>$</small>199<span>/ M</span></h2>
        </div>
      </div>
      <div class="ptable-body">
        <div class="ptable-description">
          <ul>
            <li>Pure HTML & CSS</li>
            <li>Responsive Design</li>
            <li>Well-commented Code</li>
            <li>Easy to Use</li>
          </ul>
        </div>
      </div>
      <div class="ptable-footer">
        <div class="ptable-action">
          <a href="">Buy Now</a>
        </div>
      </div>
    </div>
  </div>
  <div class="ptable-item">
    <div class="ptable-single">
      <div class="ptable-header">
        <div class="ptable-title">
          <h2>Platinum</h2>
        </div>
        <div class="ptable-price">
          <h2><small>$</small>299<span>/ M</span></h2>
        </div>
      </div>
      <div class="ptable-body">
        <div class="ptable-description">
          <ul>
            <li>Pure HTML & CSS</li>
            <li>Responsive Design</li>
            <li>Well-commented Code</li>
            <li>Easy to Use</li>
          </ul>
        </div>
      </div>
      <div class="ptable-footer">
        <div class="ptable-action">
          <a href="">Buy Now</a>
        </div>
      </div>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Other Codes

Circular Pricing Table with Details Preview . . .

In this post, the pricing panels are circular. These panels all show their items during the hover with animation and background color change.

Mini Pricing Plans Code with Selection Effect

There are a number of pricing panels in this post. These panels look like cards. Each of these panels changes their background color when clicked.

HTML Pricing Plans with Zoom on Hover

In this post, we have a number of gray panels. In hover time, these panels are displayed larger. The buttons on these panels are all gradients.

CSS Pricing Plans with Postcard Style

In this post, we have a number of pricing panels in the form of postcards. These panels open at the time of the hover, like a postcard, and their items . . .