<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Responsive Bootstrap Pricing Tables </title>
	
	<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">





</head>

<body>




    <!-- pricing table  -->
    <section id="pricing-tables">
        <div class="container">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="single-table text-center">
                    <div class="plan-header">
                        <h3>basic</h3>
                        <p>plan for basic user</p>
                        <h4 class="plan-price">$30<span>/month</span></h4>
                    </div>


                    <ul class="plan-features">
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                    </ul>
                    <a href="#" class="plan-submit hvr-bounce-to-right">buy now</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="single-table text-center">
                    <div class="plan-header">
                        <h3>basic</h3>
                        <p>plan for basic user</p>
                        <h4 class="plan-price">$30<span>/month</span></h4>
                    </div>


                    <ul class="plan-features">
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                    </ul>
                    <a href="#" class="plan-submit hvr-bounce-to-right">buy now</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="single-table text-center">
                    <div class="plan-header">
                        <h3>basic</h3>
                        <p>plan for basic user</p>
                        <h4 class="plan-price">$30<span>/month</span></h4>
                    </div>


                    <ul class="plan-features">
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                    </ul>
                    <a href="#" class="plan-submit hvr-bounce-to-right">buy now</a>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="single-table text-center">
                    <div class="plan-header">
                        <h3>basic</h3>
                        <p>plan for basic user</p>
                        <h4 class="plan-price">$30<span>/month</span></h4>
                    </div>


                    <ul class="plan-features">
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                        <li>10 Free PSD files</li>
                    </ul>
                    <a href="#" class="plan-submit hvr-bounce-to-right">buy now</a>
                </div>
            </div>
        </div>
    </section>

    <!-- end priceing table -->


</body>

</html>
// Table colors
$table-bg:#eeeeee;
$plan-header-bg:#34495E;
$single-table-bg:#fff;
$table-header:#fff;
$table-border-color:lighten($plan-header-bg, 60%);
$plan-price-color: #fff;
$plan-price-month-color: #8394AE;
$plan-price-border: lighten($plan-header-bg, 20%);
#pricing-tables {
    background-color: $table-bg;
    padding: 30px 0;
}

.single-table {
    background: $single-table-bg;
    -webkit-transition: all 0.20s linear;
    transition: all 0.20s linear;
    &:hover {
        box-shadow: 0px 3px 3px 0px #888888;
        -webkit-transition: all 0.20s linear;
        transition: all 0.20s linear;
    }
    & .plan-header {
        background: $plan-header-bg;
        color: $table-header;
        text-transform: capitalize;
        padding: 2px 0;
        & h3 {
            margin: 0;
            padding: 20px 0 5px 0;
            text-transform: uppercase;
        }
    }
    & .plan-price {
        color: $plan-price-color;
        padding: 10px 0;
        margin: 0;
        font-size: 30px;
        border-top: 2px solid $plan-price-border;
        font-weight: bold;
        & span {
            font-size: 18px;
            font-weight: normal;
        }
    }
    & ul {
        margin: 0;
        padding: 20px 0;
        list-style: none;
        & li {
            padding: 8px 0;
            margin: 0 20px;
            border-bottom: 1px solid $table-border-color;
            font-size: 15px;
        }
    }
    & .plan-submit {
        display: inline-block;
        text-decoration: none;
        margin: 20px 0 30px 0;
        padding: 10px 40px;
        border: 1px solid $plan-header-bg;
        color: $plan-header-bg;
        font-size: 15px;
        text-transform: uppercase;
    }
    /* Bounce To Right */
    .hvr-bounce-to-right {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        box-shadow: 0 0 1px transparent;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        position: relative;
        transition-property: color;
        transition-duration: 0.5s;
    }
    .hvr-bounce-to-right:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #34495E;
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
        transform-origin: 0 50%;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform, -webkit-transform;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
    }
    .hvr-bounce-to-right:hover,
    .hvr-bounce-to-right:focus,
    .hvr-bounce-to-right:active {
        color: white;
    }
    .hvr-bounce-to-right:hover:before,
    .hvr-bounce-to-right:focus:before,
    .hvr-bounce-to-right:active:before {
        -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1);
        transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    }
}
View Compiled
//   http://about.me/idanisur

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.