<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> <i class="fa fa-caret-square-o-right"></i> </span> <span class="price-value">$<span>10</span><span class="month">/per month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> <i class="fa fa-caret-square-o-right"></i> </span> <span class="price-value">$<span>10</span><span class="month">/per month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> <i class="fa fa-caret-square-o-right"></i> </span> <span class="price-value">$<span>10</span><span class="month">/per month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Standard</h3> <i class="fa fa-caret-square-o-right"></i> </span> <span class="price-value">$<span>10</span><span class="month">/per month</span></span> </div> <div class="pricingContent"> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Monthly Bandwidth</li> <li>50 Domains</li> <li>Unlimited Subdomains</li> </ul> </div><!-- / CONTENT BOX--> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-block btn-default">sign up</a> </div><!-- BUTTON BOX--> </div> </div> </div> </div> </div> </div>

.pricingTable{ text-align: center; background: #e6e6e6; } .pricingTable:hover{ margin-top: 10px; } .pricingTable > .pricingTable-header{ color:#fff; } .pricingTable .pricingTable-header > .heading{ display: block; padding: 20px 0; background: #ed687c; } .pricingTable .pricingTable-header > .heading > h3{ margin: 0 0 12px 0; text-transform: uppercase; font-weight: bold; } .pricingTable .pricingTable-header > .heading > i{ font-size: 70px; opacity: 0.5; } .pricingTable .pricingTable-header > .price-value{ display: block; background: #ed687c; margin: 20px 0; padding: 10px 0; font-size: 47px; font-weight: bold; } .pricingTable .pricingTable-header > .price-value > .month{ display: block; font-size: 14px; } .pricingTable > .pricingContent{ text-transform: capitalize; } .pricingTable > .pricingContent > ul{ list-style: none; padding: 0; margin-bottom: 0; } .pricingTable > .pricingContent > ul > li{ border-top: 1px solid #cdcdcd; border-bottom: 1px solid #fff; padding: 10px 0; position: relative; z-index: 1; overflow: hidden; } .pricingTable > .pricingContent > ul > li:after{ content: ""; width: 100%; height:100%; position: absolute; top:0; left:-100%; background: #b6b6b6; z-index: -5; transition: all 0.4s ease 0s; } .pricingTable > .pricingContent > ul > li:hover:after{ left:0; transition: all 0.4s ease 0s; } .pricingTable .pricingTable-sign-up{ padding: 20px 0; } .pricingTable .pricingTable-sign-up > .btn-block{ padding: 15px 0; text-transform: uppercase; font-size: 16px; font-weight: bold; border-radius: 0px; border: 1px solid #ed687c; color: #ed687c; background: #e6e6e6; position: relative; transition: all 0.6s ease 0s; } .pricingTable .pricingTable-sign-up > .btn-block:before{ content: ""; position: absolute; top:0; left:0; width: 100%; height:0; z-index: -1; transition: all 0.6s ease 0s; } .pricingTable .pricingTable-sign-up > .btn-block:after{ content: ""; position: absolute; bottom:0; right:0; width: 100%; height:0; z-index: -1; transition: all 0.6s ease 0s; } .pricingTable .pricingTable-sign-up > .btn-block:hover{ z-index: 1; color:#fff; } .pricingTable .pricingTable-sign-up > .btn-block:hover:before, .pricingTable .pricingTable-sign-up > .btn-block:hover:after{ background: #ed687c; height:50%; } @media screen and (max-width: 990px){ .pricingTable{ margin-bottom: 20px; } }