Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Account Created!

Please check your email for instructions to activate your account.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter
Instagram
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Interactive Pricing Table

Written by @kerixa 18 May 2020

When different options are available, pricing tables become important.More attractive pricing tables, more chance of buy. Therefor, instead of using simple tables, use following dynamic sample!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
    body{
	background:#cddc36 !important;
	font-family: 'Raleway', sans-serif;
}

.best-plan{	
	margin: 0 auto 30px auto;
	position: relative;
	z-index: 99;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(51,51,51,1);
	font-weight: 300;
}

.best-plan__head{
	text-align: center;
	margin-bottom: 45px;	
}

.best-plan__title{
	font-size: 36px;
	margin-bottom: 15px;
	margin-top:50px;
	font-weight: 800;
	color:#3c2f17;
}
.best-plan__title + p{
	font-size: 18px;
	font-weight: 300;
}

.b-price-plan{
	border: 1px solid rgba(125,138,164,.25);
	max-width: 450px;
	margin: 0 auto 30px auto;
	background: #fff;	
	-webkit-border-radius: 5px;
	        border-radius: 5px;
	-webkit-transition: opacity .35s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;
	transition: opacity .35s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;
	-o-transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear;
	transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear;
	transition: transform .35s linear, opacity .35s linear, box-shadow .3s linear, -webkit-transform .35s linear, -webkit-box-shadow .3s linear;	
}

.b-price-plan__item{
	padding: 15px 30px;	
}

.b-price-plan__head{
	padding-top: 20px;	
	padding-bottom: 20px;
	text-align: center;		
	overflow: hidden;
	position: relative;
}

.b-price-plan__head > h3{
	font-size: 18px;
	text-align: center;	
	position: relative;
	z-index: 1;
	margin: 0;
	letter-spacing: 1px;	
}

.price_foot{		
	text-align: center;
	position: relative;	
	overflow: hidden;	
}
.price_foot:before{
	content: '';
	position: absolute; top: 100%; left: 0;
	width: 100%;
	height: 100%;
	background: rgba(125,138,164,.1);
	-webkit-transition: top .6s linear;
	-o-transition: top .6s linear;
	transition: top .6s linear;
}

.b-price-plan__cost{	
	font-size: 20px;
	font-weight: 600;
	position: relative;
	z-index: 99;
	text-align: center;	
	background: rgba(125,138,164,.1);
}
.cost-title{
	font-size: 55px;
	line-height: 1;
	font-weight: 700;	
	color: rgba(125,138,164,1);
}
.cost-title:before{
	content: '\f155';
	font-family: 'FontAwesome';
	display: inline-block;
	margin-right: 5px;
	font-size: 20px;
	position: relative; top: -20px;
}
.cost-title > span{
	position: relative; top: -25px; left: 5px;
    font-size: 18px;	
}
.cost-time{
	font-size: 13px;
	color: rgba(125,138,164,.75);
}


.price-plan_pro{
	position: relative;
	z-index: 99;
	-webkit-box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3);
	        box-shadow:0 0 0 6px rgba(255, 255, 255, 0.3);
}

.p_plan_list{	
	padding: 0;
	margin: 0;
}
.p_plan_list > li{
	position: relative;
	padding: 15px 30px 15px 54px;
	margin: 0;
	list-style: none;
	background-color: #fff;
	border-top: 1px solid rgba(125,138,164,.1);
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.p_plan_list > li:hover{	
    border-color: rgba(125,138,164,.1);
	-webkit-border-radius: 5px;
	        border-radius: 5px;
    -webkit-box-shadow: 0 2px 4px rgba(125,138,164,.06);
            box-shadow: 0 2px 4px rgba(125,138,164,.06);
    position: relative;
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
    z-index: 99;
}

.p_plan_list > li .fa{	
	color: rgba(125,138,164,1);
	margin-right: 8px;	
	width: 16px;
	height: 16px;
	position: absolute; top: 50%; left: 30px;
	margin-top: -8px;
}
.p_plan_list > li .fa.text-success{
	color: rgba(160,206,78,1)!important;
}
.p_plan_list > li .fa.text-danger{
	color: rgba(253,99,71,1)!important;
}
.p_plan_list > li:first-of-type{
	border-top: none;
}

/* price_btn style */

.price_btn{	
	overflow: hidden;	
	position: relative;
	z-index: 99;
	margin: 15px auto;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	color: rgba(125,138,164,1) ;
	text-decoration: none;		
	text-transform: uppercase;
	width: 70%;
	border: 2px solid rgba(125,138,164,1) !important;
	background: #fff !important;
	padding: 15px 20px !important;	    
    -webkit-border-radius: 5px;	    
            border-radius: 5px;				
}
.price_btn:before,
.price_btn:after{
	content: '';
	position: absolute; top: 0; left: 0;
	width: 0;
	height: 50%;
	background: rgba(125,138,164,1) !important;
	-webkit-transition: width .3s ease-in;
	-o-transition: width .3s ease-in;
	transition: width .3s ease-in;
}
.price_btn:after{
	top: auto;
	bottom: 0;
	-webkit-transition: width .4s ease-in;
	-o-transition: width .4s ease-in;
	transition: width .4s ease-in;
}
.price_btn:hover:before,
.price_btn:hover:after{
	width: 100%;
}

.price_btn > span{
	position: relative;
	z-index: 99;
}

.price_btn .fa{
	font-size: 18px;
	position: absolute; top: 50%; left: 100%;
	z-index: 99;
	width: 30px;		
	opacity: 0;
	-webkit-transition: left .55s linear, opacity .55s linear;
	-o-transition: left .55s linear, opacity .55s linear;
	transition: left .55s linear, opacity .55s linear;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.price_btn:hover .fa{
	left: 80%;
	opacity: 1;
}

.price_btn:hover{
	overflow: visible;
	background: #fff;
	border-color: rgba(125,138,164,1) !important;	
  
}
.price_btn:active,
.price_btn:focus{	
	background: rgba(125,138,164,1) !important;
	border-color: rgba(125,138,164,1) !important;
}

.b-price-plan:hover{
	-webkit-box-shadow: 0 10px 20px rgba(125,138,164,.25) !important;
	        box-shadow: 0 10px 20px rgba(125,138,164,.25) !important;
}
.b-price-plan:hover .price_foot:before{
	top: 0;
}

.b_plan_body:hover .b-price-plan{
	opacity: .25;
	-webkit-transform: scale(.95);
	    -ms-transform: scale(.95);
	        transform: scale(.95);
}
.b_plan_body:hover .b-price-plan:hover{
	opacity: 1;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
}

.ftr{
    text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
    window.alert = function(){};
    var defaultCSS = document.getElementById('bootstrap-css');
    function changeCSS(css){
        if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
        else $('head > link').filter(':first').replaceWith(defaultCSS); 
    }
    $( document ).ready(function() {
      var iframe_height = parseInt($('html').height()); 
      window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
    });
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:500,800" rel="stylesheet">
<div class="best-plan">
<div class="container">
		<div class="b_plan_body">					
			<div class="row">
				<div class="col-4">
					<!-- price plans item begin -->
					<div class="b-price-plan">
						<div class="b-price-plan__item b-price-plan__head">
							<h3>Standard</h3>
						</div>
						<div class="b-price-plan__item b-price-plan__cost">											
							<div class="cost-title">4<span>99</span></div>
							<div class="cost-time">Monthly</div>
						</div>
						<ul class="p_plan_list">
							<li><i class="fa fa-laptop" aria-hidden="true"></i> 1 Site</li>
							<li><i class="fa fa-hdd-o" aria-hidden="true"></i> 1 GB Storage</li>										
							<li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li>
							<li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li>
							<li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li>
						</ul>								
						<div class="b-price-plan__item price_foot">																			
							<a href="http://www.csshint.com/" class="btn btn-warning price_btn">
								<span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i>
							</a>
						</div>
					</div>
					<!-- price plans item end -->
				</div>
				<div class="col-4">
					<!-- price plans item begin -->
					<div class="b-price-plan price-plan_pro">
						<div class="b-price-plan__item b-price-plan__head">
							<h3>Professional</h3>
						</div>
						<div class="b-price-plan__item b-price-plan__cost">											
							<div class="cost-title">12<span>99</span></div>
							<div class="cost-time">Monthly</div>
						</div>
						<ul class="p_plan_list">
							<li><i class="fa fa-laptop" aria-hidden="true"></i> 5 Sites</li>
							<li><i class="fa fa-hdd-o" aria-hidden="true"></i> 5 GB Storage</li>										
							<li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li>
							<li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li>
							<li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li>
						</ul>								
						<div class="b-price-plan__item price_foot">																			
							<a href="http://www.csshint.com/" class="btn btn-warning price_btn">
								<span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i>
							</a>
						</div>
					</div>
					<!-- price plans item end -->								
				</div>	
				<div class="col-4">
					<!-- price plans item begin -->
					<div class="b-price-plan">
						<div class="b-price-plan__item b-price-plan__head">
							<h3>Enterprise</h3>
						</div>
						<div class="b-price-plan__item b-price-plan__cost">											
							<div class="cost-title">45<span>99</span></div>
							<div class="cost-time">Monthly</div>
						</div>
						<ul class="p_plan_list">
							<li><i class="fa fa-laptop" aria-hidden="true"></i> 10 Sites</li>
							<li><i class="fa fa-hdd-o" aria-hidden="true"></i> 10 GB Storage</li>										
							<li><i class="fa fa-database" aria-hidden="true"></i> Database unlimited</li>
							<li><i class="fa fa-diamond" aria-hidden="true"></i> Free test</li>
							<li><i class="fa fa-cogs" aria-hidden="true"></i> Support 24 x 7</li>
						</ul>								
						<div class="b-price-plan__item price_foot">																			
							<a href="http://www.csshint.com/" class="btn btn-warning price_btn">
								<span>Buy now</span> <i class="fa fa-caret-right" aria-hidden="true"></i>
							</a>
						</div>
					</div>
					<!-- price plans item end -->								
				</div>
			</div>
		</div>
	</div>
	</div>	<script type="text/javascript">
</script><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2