{"id":1179,"date":"2015-02-25T15:02:20","date_gmt":"2015-02-25T21:02:20","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1179"},"modified":"2015-02-25T15:02:20","modified_gmt":"2015-02-25T21:02:20","slug":"creating-simple-and-interactive-pricing-tables-in-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/creating-simple-and-interactive-pricing-tables-in-css\/","title":{"rendered":"Creating Simple and Interactive Pricing Tables in CSS"},"content":{"rendered":"<p><!-- Post Status : FINISHED - Please Review and Publish --><!-- Custom CSS Styles Block : Ahmed El-Shinawy--><\/p>\n<style media=\"screen\" type=\"text\/css\">.preview-block{position:relative;background:#f8f8f8;padding:20px;margin-bottom:20px;border:1px solid #dedede;text-align:center;transition:all .5s}@import url(http:\/\/fonts.googleapis.com\/css?family=Montserrat:400,700);@import url(http:\/\/fonts.googleapis.com\/cssfamily=Source+Sans+Pro:300,400,600);body{background:#ededeb}.title{width:600px;margin:0 auto;text-align:center}.title h1{margin:0;font-family:'font-family: 'Montserrat', sans-serif;',sans-serif;font-weight:400;color:#3d3d3d}.title h2{margin:8px 0 0;font-size:26px;color:#8b8b8b;font-weight:200;font-family:'font-family: 'Montserrat', sans-serif;',sans-serif}.title h3{margin:0;font-size:12px;color:#bababa;font-weight:200;font-family:'font-family: 'Source Sans Pro', sans-serif;',sans-serif}.ui{width:300px;margin:20px auto 0;font-family:Montserrat,sans-serif;color:#fff;box-shadow:none}.ui .drop{z-index:3;opacity:0;width: 100%;background:#107FC9;position:absolute;color:#fff;bottom:100px;padding:15px 30px 0;transition-property:bottom,opacity;transition-duration:.8s}.ui .drop p{color:#f8fbfa}.ui_box{width:300px;float:left;margin:0 auto;margin-bottom:20px;position:relative;background:#dedede;cursor:pointer;transform:scale(1);transition-property:all;transition-duration:.1s;border-bottom:5px solid #107FC9;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 1px 0 rgba(0,0,0,.25)}body .ui_box_top{background:#3b3b3b;padding:15px; text-align:left;}body .ui_box h2{font-weight:400;font-family: 'Montserrat', sans-serif;font-size:40px;margin:-4px 0 3px}body .ui_box h1{font-weight:400;font-family: 'Montserrat', sans-serif;font-size:20px;margin:-4px 0 3px}body .ui_box p{font-size:15px !important;font-family:'Source Sans Pro',sans-serif;color:#fff;clear:left;font-weight:400;margin:1px 0 0}body .ui_box:hover{-webkit-box-shadow:0 1px 3px 2px rgba(0,0,0,.25);box-shadow:0 1px 3px 2px rgba(0,0,0,.25);background:#dedede;transform:scale(1.1);transition-property:transform,background;transition-duration:.3s;position:relative;z-index:1}.ui_box .ui_box_inner p{text-align:center;background:#f0f0f0;color:#131313;padding:10px}.ui_box:hover>.ui_box_inner p{margin:1px 0 0;background:#f0f0f0;color:#131313;padding:10px}.ui_box:hover>.drop{position:relative;transition-property:bottom,opacity;transition-duration:.2s;padding-bottom:18px;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.35);box-shadow:0 1px 1px 0 rgba(0,0,0,.35);bottom:0;opacity:1}.ui_box:hover>.drop .arrow{transition-property:transform;transition-duration:.5s;transform:rotate(405deg)}.arrow{width:6px;height:6px;margin-top:10px;transition-property:transform;transition-duration:1s;transform:rotate(0deg);-webkit-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);border-top:1px solid #CDEAD3;border-right:1px solid #CDEAD3;float:right;position:relative;top:-24px;right:0}.highlight{background:#107FC9!important}<\/style>\n<p><!-- Actual Post Starts Here--><br \/>\nIn this tutorial we&#8217;re going to learn how to create some cool looking and interactive pricing tables, In pure CSS! Usually the pricing tables are created using static images which follows the process of making them interactive, but the technique we&#8217;ll learn today will facilitate the process and will allow us to create beautiful pricing tables that look like this:<\/p>\n<div class=\"preview-block\">\n<p>This is what it should look like when done<\/p>\n<div class=\"ui\">\n<div class=\"ui_box\">\n<div class=\"ui_box_top highlight\">\n<h1>Standard  Plan<\/h1>\n<h2>$59.99<\/h2>\n<\/p>\n<p>per Month<\/p>\n<\/p><\/div>\n<div class=\"ui_box_inner\">\n<p>100 GB Disk Space<\/p>\n<p>50 Email Accounts<\/p>\n<p>600 Subdomains<\/p>\n<p>FREE SEO<\/p>\n<\/div>\n<div class=\"drop\">\n<p>Sign Up Now<\/p>\n<div class=\"arrow\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"clear:both;\"><\/div>\n<\/div>\n<\/div>\n<p>Looks pretty cool, doesn&#8217;t it? Let&#8217;s dive in on how to create it. <\/p>\n<p><strong>Setting up the structure of the table<\/strong><br \/>\nAll the table elements will all be added inside a <code>div<\/code> with a class <code>ui_box<\/code>  which will hold two main <code>div<\/code>s, the top part of the table and the inner part of the table. The top part will have the name of the plan and the price will be displayed nicely. The inner part will hold the features and the drop button. The HTML should look like the following:<\/p>\n<div class=\"codeBlock\">\n<pre>\n   &#60;div class=\"ui_box\">\n     &#60;div class=\"ui_box_top highlight\">\n        &#60;h1>Standard  Plan&#60;\/h1>\n        &#60;h2>$59.99&#60;\/h2>\n        &#60;p>per Month&#60;\/p>\n     &#60;\/div>\n     &#60;div class=\"ui_box_inner\">\n       &#60;p>100 GB Disk Space&#60;\/p>\n       &#60;p>50 Email Accounts&#60;\/p>\n       &#60;p>600 Subdomains&#60;\/p>\n       &#60;p>FREE SEO&#60;\/p>\n     &#60;\/div>\n     &#60;div class=\"drop\">\n      &#60;p>Sign Up Now&#60;\/p>\n      &#60;div class=\"arrow\">&#60;\/div>\n     &#60;\/div>\n  &#60;\/div>\n<\/pre>\n<\/div>\n<p><strong>Styling the outer container box <code>ui_box<\/code><\/strong><br \/>\nThe ui_box will be the main container that will capture the hover event and scale the pricing table. So we&#8217;ll have to write the CSS for animating the pricing table&#8217;s base on hover with the following CSS:<\/p>\n<div class=\"codeBlock\">\n<pre>\n  .ui_box {\n      position: relative;\n      width: 300px;\n      float:left;\n      margin: 0 auto;\n      background: #dedede;\n      cursor: pointer;\n      transform: scale(1);\n      transition-property: all;\n      transition-duration: .1s; \n      border-bottom: 5px solid #107FC9;\n      -webkit-box-shadow: 0 1px 1px 0px rgba(0,0,0,.25);\n      box-shadow: 0 1px 1px 0px rgba(0,0,0,.25);\n      }\n  .ui_box:hover {\n      transform: scale(1.1);\n      transition-property: transform,background;\n      -webkit-box-shadow: 0 1px 3px 2px rgba(0,0,0,.25);\n      box-shadow: 0 1px 3px 2px rgba(0,0,0,.25);\n      transition-duration: .3s;\n      position: relative;\n      z-index: 1; \n      }\n  <\/pre>\n<\/div>\n<p>Now that we have created the base of the table, we&#8217;ll need to style the text inside the table. We&#8217;ll do that by selecting appropriate fonts and setting up the font sizes correctly. We can do that by using <code>@import<\/code> to get the webfonts we&#8217;re going to use and then assign them to the text. We&#8217;ll be using <code>Montserrat<\/code> and <code>Source Sans Pro<\/code> webfonts.<\/p>\n<div class=\"codeBlock\">\n<pre>\n       @import url(http:\/\/fonts.googleapis.com\/css?family=Montserrat:400,700);\n       @import url(http:\/\/fonts.googleapis.com\/cssfamily=Source+Sans+Pro:300,400,600);      \n      .ui_box h2 {\n        font-weight: normal;\n        font-size: 40px;\n        font-family: 'Montserrat', sans-serif;\n        margin: -4px 0px 3px 0px; }\n      .ui_box h1 {\n        font-weight: normal;\n        font-size: 20px;\n        font-family: 'Montserrat', sans-serif;\n        margin: -4px 0px 3px 0px; }\n      .ui_box p {\n        font-size: 15px;\n        font-family: 'Source Sans Pro', sans-serif;\n        color: #fff;\n        clear: left;\n        font-weight: 400;\n        margin: 1px 0px 0px 0px; }\n  <\/pre>\n<\/div>\n<p><strong>Adding the table content<\/strong><br \/>\nThe contents of the table are split into two main parts: the Top part &#8211; which has the name of the plan and the price &#8211; and the inner part which contains the details of the plan. When styling the top part, we should keep in mind that we might need to highlight a table, so we&#8217;ll have to create an extra <code>.highlight<\/code> class in order to add to the table to make the header blue.<\/p>\n<div class=\"preview-block\">\n<p>Table Top Panel (Without <code>.highlight<\/code> class)<\/p>\n<div class=\"ui\">\n<div class=\"ui_box\">\n<div class=\"ui_box_top\">\n<h1>Standard  Plan<\/h1>\n<h2>$59.99<\/h2>\n<p>per Month<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"clear:both;\"><\/div>\n<\/div>\n<\/div>\n<div class=\"codeBlock\">\n<pre>\n.ui_box__top {\n   background:#3b3b3b;\n   padding:15px;\n}\n.highlight {\n  background:#107FC9 !important;\n}\n.ui_box .ui_box__inner p {\n  text-align:center;\n  background:#f0f0f0;\n  color: #131313;\n  padding:10px;\n}\n\n.ui_box:hover > .ui_box__inner p {\n  margin: 1px 0px 0px 0px; \n  background:#f0f0f0;\n  color: #131313;\n  padding:10px;}\n<\/pre>\n<\/div>\n<div class=\"preview-block\">\n<p>Table Top Panel (With <code>.highlight<\/code> class)<\/p>\n<div class=\"ui\">\n<div class=\"ui_box\">\n<div class=\"ui_box_top highlight\">\n<h1>Standard  Plan<\/h1>\n<h2>$59.99<\/h2>\n<p>per Month<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"clear:both;\"><\/div>\n<\/div>\n<\/div>\n<p>Each row on the inner part of the table will be made using a <code>&#60;p><\/code> element to hold the text. This should be styled as follows:<\/p>\n<div class=\"codeBlock\">\n<pre>\n.ui_box .ui_box__inner p {\n  text-align:center;\n  background:#f0f0f0;\n  color: #131313;\n  padding:10px;\n}\n<\/pre>\n<\/div>\n<div class=\"preview-block\">\n<p> Adding <code>&#60;p><\/code> tag with text inside <code>&#60;div class=\"ui_box_inner\"><\/code><\/p>\n<div class=\"ui\">\n<div class=\"ui_box\">\n<div class=\"ui_box_top highlight\">\n<h1>Standard  Plan<\/h1>\n<h2>$59.99<\/h2>\n<p>per Month<\/p>\n<\/p><\/div>\n<div class=\"ui_box_inner\">\n<p>100GB Disk Space<\/p>\n<\/div><\/div>\n<div style=\"clear:both;\"><\/div>\n<\/div>\n<\/div>\n<p><strong>Making the drop panel<\/strong><br \/>\nYou noticed the blue button that drops when you hover over the table, right? By using CSS animations we can easily create this effect. We first create a regular <code>div<\/code> and then give it a class drop and then style that class in CSS as follows:<\/p>\n<div class=\"codeBlock\">\n<pre>\n.ui .drop {\n      z-index: 3;\n      opacity: 0;\n      width: 240px;\n      background: #107FC9;\n      position: absolute;\n      color: white;\n      bottom: 100px;\n      padding: 15px 30px 0px 30px;\n      transition-property: bottom,opacity;\n      transition-duration: .8s; }\n      body .ui .drop p {\n        color: #f8fbfa; }\n\n.ui_box:hover > .drop {\n  position:relative;\n  transition-property: bottom,opacity;\n  transition-duration: .2s;\n  padding-bottom:18px;\n  -webkit-box-shadow: 0 1px 1px 0px rgba(0,0,0,.35);\n  box-shadow: 0 1px 1px 0px rgba(0,0,0,.35);\n  bottom: 0px;\n  opacity: 1; }\n\n.ui_box:hover > .drop .arrow {\n  transition-property: transform;\n  transition-duration: .5s;\n  transform: rotate(405deg); }\n\n.arrow {\n  width: 6px;\n  height: 6px;\n  margin-top: 15px;\n  transition-property: transform;\n  transition-duration: 1s;\n  transform: rotate(0deg);\n  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n  border-top: 1px solid #CDEAD3;\n  border-right: 1px solid #CDEAD3;\n  float: right;\n  position: relative;\n  top: -24px;\n  right: 0px; }\n<\/pre>\n<\/div>\n<div class=\"preview-block\">\n<p>Hover on the table below to see the hover reveal animation<\/p>\n<div class=\"ui\">\n<div class=\"ui_box\">\n<div class=\"ui_box_top highlight\">\n<h1>Standard  Plan<\/h1>\n<h2>$59.99<\/h2>\n<p>per Month<\/p>\n<\/p><\/div>\n<div class=\"ui_box_inner\">\n<p>&nbsp;<\/p>\n<\/div>\n<div class=\"drop\">\n<p>Sign Up Now<\/p>\n<div class=\"arrow\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"clear:both;\"><\/div>\n<\/div>\n<\/div>\n<p><strong>Final Result:<\/strong><br \/>\n<a href=\"http:\/\/codepen.io\/anon\/pen\/LEmqRa\" target=\"_blank\" title=\"Click here\" rel=\"noopener noreferrer\"><strong>Click Here<\/strong><\/a> for a full demo I made on codepen.<br \/>\nThat&#8217;s it! Now we&#8217;ve created a cool looking and interactive pricing table. I hope you enjoyed this tutorial.<\/p>\n<div class=\"preview-block\">\n<p>Result without <code>.highlight<\/code> class<\/p>\n<div class=\"ui\">\n<div class=\"ui_box\">\n<div class=\"ui_box_top\">\n<h1>Standard  Plan<\/h1>\n<h2>$59.99<\/h2>\n<\/p>\n<p>per Month<\/p>\n<\/p><\/div>\n<div class=\"ui_box_inner\">\n<p>100 GB Disk Space<\/p>\n<p>50 Email Accounts<\/p>\n<p>600 Subdomains<\/p>\n<p>FREE SEO<\/p>\n<\/div>\n<div class=\"drop\">\n<p>Sign Up Now<\/p>\n<div class=\"arrow\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div style=\"clear:both;\"><\/div>\n<\/div>\n<\/div>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<\/p>\n<p>.preview-block{position:relative;background:#f8f8f8;padding:20px;margin-bottom:20px;border:1px solid #dedede;text-align:center;transition:all .5s}@import url(http:\/\/fonts.googleapis.com\/css?family=Montserrat:400,700);@import url(http:\/\/fonts.googleapis.com\/cssfamily=Source+Sans+Pro:300,400,600);body{background:#ededeb}.title{width:600px;margin:0 auto;text-align:center}.title h1{margin:0;font-family:&#8217;font-family: &#8216;Montserrat&#8217;, sans-serif;&#8217;,sans-serif;font-weight:400;color:#3d3d3d}.title h2{margin:8px 0 0;font-size:26px;color:#8b8b8b;font-weight:200;font-family:&#8217;font-family: &#8216;Montserrat&#8217;, sans-serif;&#8217;,sans-serif}.title h3{margin:0;font-size:12px;color:#bababa;font-weight:200;font-family:&#8217;font-family: &#8216;Source Sans Pro&#8217;, sans-serif;&#8217;,sans-serif}.ui{width:300px;margin:20px auto 0;font-family:Montserrat,sans-serif;color:#fff;box-shadow:none}.ui .drop{z-index:3;opacity:0;width: 100%;background:#107FC9;position:absolute;color:#fff;bottom:100px;padding:15px 30px 0;transition-property:bottom,opacity;transition-duration:.8s}.ui .drop p{color:#f8fbfa}.ui_box{width:300px;float:left;margin:0 auto;margin-bottom:20px;position:relative;background:#dedede;cursor:pointer;transform:scale(1);transition-property:all;transition-duration:.1s;border-bottom:5px solid #107FC9;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 1px 0 rgba(0,0,0,.25)}body .ui_box_top{background:#3b3b3b;padding:15px; [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/creating-simple-and-interactive-pricing-tables-in-css\/\" title=\"Click to read 'Creating Simple and Interactive Pricing Tables in CSS'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165],"tags":[79,289,325,326,348,360],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1179"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1179"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1179\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}