How to create pure CSS pricing tables
Nowadays it is hard to imagine websites without selling something. For this purpose usually the best choice is pricing tables, which allow users to see a price and features of different products at once. In this article, we will create Pure CSS Pricing Tables.
For the start, let's create one pricing plan block.
HTML code:
- 100MB Space
- 2 FTP users
- 2 Databases
- 1 free domain
CSS code:
.resp-pt { cursor: default; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.2; color: #38678f; text-align: center; position: relative; z-index: 1; } .resp-pt *, .resp-pt *:before, .resp-pt *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .resp-pt .pt-block { margin: 30px 0 40px; position: relative; z-index: 1; padding: 35px 15px 25px; } .resp-pt .pt-back { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; background-color: #fff; border: 1px solid #699bc4; } .resp-pt .pt-head { position: relative; padding-bottom: 25px; } .resp-pt .pt-price-block { font-size: 40px; line-height: 60px; color: #4682b4; } .resp-pt .pt-title { font-size: 48px; line-height: 50px; color: #4682b4; } .resp-pt .pt-sub-text { text-transform: uppercase; color: #568ebd; } .resp-pt .pt-sub-title { padding-top: 5px; font-size: 21px; line-height: 22px; color: #7ba7cc; } .resp-pt .pt-footer { text-align: center; padding-top: 35px; } .resp-pt .pt-btn { background-color: #4682b4; color: #fff; border: 1px solid #3f75a2; font-size: 24px; line-height: 50px; height: 52px; padding: 0 15px; font-family: inherit; cursor: pointer; display: inline-block; text-decoration: none; } .resp-pt button::-moz-focus-inner { border: 0; padding: 0; margin: 0; } .resp-pt .pt-list { list-style: none; margin: 0; padding: 20px 0 0; display: inline-block; text-align: left; } .resp-pt .pt-list li { list-style: none; display: block; margin: 0; padding: 10px 0 5px; } .resp-pt .pt-list .fa { width: 25px; font-size: 21px; }
Icons was done with Font Awesome.
Now let's create HTML structure for 4 pricing plans:
- 100MB Space
- 2 FTP users
- 2 Databases
- 1 free domain
- 1GB Space
- 2 FTP users
- 2 Databases
- 1 free domain
- 2GB Space
- 2 FTP users
- 5 Databases
- 1 free domain
- 1TB Space
- 20 FTP users
- 20 Databases
- 10 free domain
and make it responsive, by adding CSS:
.resp-pt .pt-cols { zoom: 1; } .resp-pt .pt-cols:before, .resp-pt .pt-cols:after { content: ""; display: table; } .resp-pt .pt-cols:after { clear: both; } @media (min-width: 620px) { .resp-pt .pt-cols > .pt-col { width: 50%; } } @media (min-width: 620px) { .resp-pt .pt-cols { margin: 0 -15px; } .resp-pt .pt-cols > .pt-col { padding: 0 15px; float: left; } } @media (min-width: 620px) and (max-width: 991px) { .resp-pt .pt-cols > .pt-col:nth-child(2n+1) { clear: left; } } @media (min-width: 992px) { .resp-pt .pt-cols > .pt-col { width: 25%; } .resp-pt .pt-cols > .pt-col:nth-child(4n+1) { clear: left; } }
At this stage we have static Responsive Pricing Tables.
To make it more attractive we can add a hover animation and make some of plans pre-selected.
CSS code:
.resp-pt .pt-btn, .resp-pt .pt-back, .resp-pt .pt-price-block, .resp-pt .pt-block, .resp-pt .pt-title, .resp-pt .pt-sub-title, .resp-pt .pt-sub-text { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .resp-pt .pt-selected, .resp-pt .pt-block:hover, .resp-pt:hover .pt-selected:hover, .resp-pt .pt-selected .pt-title, .resp-pt .pt-block:hover .pt-title, .resp-pt:hover .pt-selected:hover .pt-title, .resp-pt .pt-selected .pt-price-block, .resp-pt .pt-block:hover .pt-price-block, .resp-pt:hover .pt-selected:hover .pt-price-block { color: #fff; } .resp-pt .pt-selected .pt-sub-title, .resp-pt .pt-block:hover .pt-sub-title, .resp-pt:hover .pt-selected:hover .pt-sub-title, .resp-pt .pt-selected .pt-sub-text, .resp-pt .pt-block:hover .pt-sub-text, .resp-pt:hover .pt-selected:hover .pt-sub-text { color: #eee; } .resp-pt .pt-selected .pt-btn, .resp-pt .pt-block:hover .pt-btn, .resp-pt:hover .pt-selected:hover .pt-btn, .resp-pt .pt-selected .btn, .resp-pt .pt-block:hover .btn, .resp-pt:hover .pt-selected:hover .btn { background-color: #fff; color: #4682b4; -webkit-box-shadow: 0 3px 10px -3px #000; box-shadow: 0 3px 10px -3px #000; border-color: #f2f2f2; } .resp-pt .pt-selected .pt-btn:hover, .resp-pt .pt-block:hover .pt-btn:hover, .resp-pt:hover .pt-selected:hover .pt-btn:hover, .resp-pt .pt-selected .btn:hover, .resp-pt .pt-block:hover .btn:hover, .resp-pt:hover .pt-selected:hover .btn:hover, .resp-pt .pt-selected .pt-btn:focus, .resp-pt .pt-block:hover .pt-btn:focus, .resp-pt:hover .pt-selected:hover .pt-btn:focus, .resp-pt .pt-selected .btn:focus, .resp-pt .pt-block:hover .btn:focus, .resp-pt:hover .pt-selected:hover .btn:focus { -webkit-box-shadow: 0 3px 10px -3px #315a7d; box-shadow: 0 3px 10px -3px #315a7d; } .resp-pt .pt-selected .pt-back, .resp-pt .pt-block:hover .pt-back, .resp-pt:hover .pt-selected:hover .pt-back { background-color: #4682b4; } .resp-pt:hover .pt-selected { color: #38678f; } .resp-pt:hover .pt-selected .pt-title { color: #4682b4; } .resp-pt:hover .pt-selected .pt-sub-title { color: #7ba7cc; } .resp-pt:hover .pt-selected .pt-sub-text { color: #568ebd; } .resp-pt:hover .pt-selected .pt-back { background-color: #fff; } .resp-pt:hover .pt-selected .pt-price-block { color: #4682b4; } .resp-pt:hover .pt-selected .pt-btn, .resp-pt:hover .pt-selected .btn { background-color: #4682b4; color: #fff; -webkit-box-shadow: none; box-shadow: none; border-color: #3f75a2; }
For pre-selected plan we should change HTML a little, add pt-selected class:
- 1GB Space
- 2 FTP users
- 2 Databases
- 1 free domain
Live demo
The following archive contains the examples above:
pure_css_pricing_tables.zip 522.55 kB
Continue reading here: Animated Falling Snow Using Keyframes in CSS3 without Java Script
Was this article helpful?