RESPONSIVE PRICING TABLE DESIGN

index.html

<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="http://www.digimadmedia.com">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="http://www.digimadmedia.com">
      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="http://www.digimadmedia.com">
      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="http://www.digimadmedia.com">
      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>

responsive-pricing-table-design.markdown

RESPONSIVE PRICING TABLE DESIGN

RESPONSIVE PRICING TABLE DESIGN

A Pen by Digimad Media on CodePen.

License.

style.scss

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;
  a{
    color: #66CCCC;
  }
}

.price-table-wrapper{
  font-family: 'Lato', sans-serif;
  text-align: center;
  margin-top: 30px;
  
  .featured-table{
    box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36);
  }
  
  .pricing-table{
    display: inline-block;
    border: 1px solid #C8C8C8;
    border-radius: 10px;
    background: white;
    margin: 20px;
    transition: all 0.3s ease-in-out;
    
    &__header{
      padding: 20px;
      font-size: 20px;
      color: #909090 ;
      background: #E0E0E0;
    }
    &__price{
      color: #66CCCC;
      padding: 20px;
      margin: auto;
      font-size: 40px;
      font-weight: 500;
    }
    &__button{
      display: block;
      background: #66CCCC;
      text-decoration: none;
      padding: 20px;
      color: white;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease-in-out;
      
      &:before{
        position: absolute;
        left: -20%;
        top: -10%;
        content: '';
        width: 60%;
        height: 220%;
        transform: rotate(-30deg);
        background: white;
        opacity: .3;
        transition: all 0.3s ease-in-out;
      }
      
       &: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;
        }
      
      &:hover{
        background: black;
      }
    }
    &__list{
      padding: 20px;
      color: #A0A0A0;
      li{
        padding: 15px;
        border-bottom: 1px solid #C8C8C8 ;
        
        &:last-child{
          border: none;
        }
      }
    }
    
    &:hover{
      box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36);
      
      .pricing-table__button{
        padding-left: 0;
        padding-right: 35px;
       &:before{
          top: -80%;
          transform: rotate(0deg);
          width: 100%;
        }
        &:after{
          opacity: 1;
          padding-right: 15px;
        }
      }
    }
  }
}