Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Pricing Table Demo using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 556
    Comment on it

    Hello Reader, 

    In this blog I am going to tell you how to create Pricing Table using CSS3. It includes features like : transforms, gradient, shadow and nth-child. 

    Go to the link below and hover your mouse over the price table to see the CSS animation in action.

     

    https://jsfiddle.net/a0f7ugo2/1/

     

    HTML :-  The HTML for the table is in reality not a table yet I prefer not working with tables. The information that should be shown can be better composed by utilizing a list this is because the information can split into columns to be displayed to the visitor.

    <div class="pricing_table">
    		<ul>
    			<li>Standard</li>
    			<li>&pound;20</li>
    			<li>Perfect for those getting started with our app.</li>
    			<li>15 Projects</li>
    			<li>5GB Storage</li>
    			<li>Unlimited Users</li>
    			<li>No Time Tracking</li>
    			<li>Enchaned Security</li>
    			<li></li>
    			<li><a href="" class="buy_now">Buy Now</a></li>
    		</ul>
    		
    		<ul>
    			<li>Premium</li>
    			<li>&pound;60</li>
    			<li>Perfect for those getting started with our app.</li>
    			<li>15 Projects</li>
    			<li>5GB Storage</li>
    			<li>Unlimited Users</li>
    			<li>No Time Tracking</li>
    			<li>Enchaned Security</li>
    			<li></li>
    			<li><a href="" class="buy_now">Buy Now</a></li>
    		</ul>
    		
    		<ul>
    			<li>Professional</li>
    			<li>&pound;80</li>
    			<li>Perfect for those getting started with our app.</li>
    			<li>15 Projects</li>
    			<li>5GB Storage</li>
    			<li>Unlimited Users</li>
    			<li>No Time Tracking</li>
    			<li>Enchaned Security</li>
    			<li></li>
    			<li><a href="" class="buy_now">Buy Now</a></li>
    		</ul>
    		
    		<ul>
    			<li>Plus</li>
    			<li>&pound;100</li>
    			<li>Perfect for those getting started with our app.</li>
    			<li>15 Projects</li>
    			<li>5GB Storage</li>
    			<li>Unlimited Users</li>
    			<li>No Time Tracking</li>
    			<li>Enchaned Security</li>
    			<li></li>
    			<li><a href="" class="buy_now">Buy Now</a></li>
    		</ul>
    		
    	
    </div>

    CSS :- 

    .pricing_table {  
    	border:1px solid #c4cbcc;
    	border-radius:4px;
    	-moz-border-radius:4px;
    	-webkit-border-radius:4px;
    	outline:7px solid #f2f3f3;
    	float:left;
    }
    
    .pricing_table ul { 
    	list-style:none; 
    	float:left; 
    	width:147px; 
    	margin:0; 
    	border:1px solid #f2f3f3;
    	padding:5px;
    	text-align:center;
    	background-color:#FFF;
    }
    
    .pricing_table ul:hover { 
    	-webkit-transform: scale(1.1);
      	-moz-transform: scale(1.1);
      	-o-transform: scale(1.1);
      	-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
      	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
      	box-shadow:3px 5px 7px rgba(0,0,0,.7);
    	cursor:pointer;
    }
    
    .pricing_table ul li:first-child { 
    	font-size:18px;
    	font-weight:bold;
    }
    .pricing_table ul li:nth-child(2) { 
    	background:#fbfbfb;
    }
    .pricing_table ul li:nth-child(3) { 
    	font-size:12px;
    	font-weight:bold;
    }
    .pricing_table ul li:nth-child(n+4) { 
    	font-size:14px;
    }
    .pricing_table ul li:last-child a { 
    	border-radius:10px;
    	-moz-border-radius:10px;
    	-webkit-border-radius:10px;
    	border:1px solid #c4cbcc;
    	padding:10px;
    	margin:5px 0;
    	background: #e5e696; /* Old browsers */
    	background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* IE10+ */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 ); /* IE6-9 */
    	background: linear-gradient(top, #e5e696 0%,#d1d360 100%); /* W3C */
    	color:#000;
    	font-style:italic;
    	display:block;
    }

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: