CSS Stylish Pricing Table Design #1
CSS Pricing Table :
Solution :
In this tutorial we are looking one form of stylish price table using the CSS. This tutorial we are not using the table, instead we are using the unordered list for each table td.
Each Column in the Price table will be represented by using following structure -
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul> <li>Free</li> <li>$0</li> <li>Perfect for startups and learners</li> <li>3 Projects</li> <li>1GB Storage</li> <li>1 User</li> <li>No Time Tracking</li> <li>Enchaned Security</li> <li><a href="" class="buy_now">Purchase</a></li> </ul> |
suppose we need to display 4 columns then we need to write 4 sets of unordered list. All these set of unordered lists is wrapped inside the div.
|
1 |
<div class="price_table"> |
Now we need to write CSS code for styling the above HTML code. First of all we are removing all styles i.e bullets from the unordered list and we are setting the width for ul list.
|
1 2 3 4 5 6 7 8 9 10 |
.price_table ul { list-style:none; float:left; width:147px; margin:0; border:1px solid #f2f3f3; padding:5px; text-align:center; background-color:#FFF; } |
Main div is having the property float:left which causes all the ul lists aligned horizontally.
|
1 2 3 4 5 |
.price_table ul:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); } |
Above code will expand the column when we hover cursor over it. Following selectors will style the childs of the list -
| Selector | Explanation |
|---|---|
| .price_table ul li:first-child | Styling the first list item of the unordered list |
| .price_table ul li:nth-child(2) | Styling the 2nd list element |
| .price_table ul li:nth-child(3) | Styling the 3rd list element |
| .price_table ul li:nth-child(n+4) | Styling the remaining list elements |
Complete Code :
HTML Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="price_table"> <ul> <li>Free</li> <li>$0</li> <li>Perfect for startups & learners</li> <li>3 Projects</li> <li>1GB Storage</li> <li>1 User</li> <li>No Time Tracking</li> <li>Enchaned Security</li> <li><a href="" class="buy_now">Purchase</a></li> </ul> <ul> <li>Standard</li> <li>$20</li> <li>Perfect for small business.</li> <li>15 Projects</li> <li>5GB Storage</li> <li>3 Users</li> <li>No Time Tracking</li> <li>Enchaned Security</li> <li><a href="" class="buy_now">Purchase</a></li> </ul> </div> |
CSS Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
.price_table { border:1px solid #c4cbcc; border-radius:4px; -moz-border-radius:5px; -webkit-border-radius:5px; float:left; margin-top: 25px; } .price_table ul { list-style:none; float:left; width:147px; margin:0; border:1px solid #f2f3f3; padding:5px; text-align:center; background-color:#FFF; } .price_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; background:#fff; } .price_table ul li { border-bottom:1px dashed #cfd2d2; padding:10px 0; } .price_table ul li:first-child { color:#FFFFFF; font-size:18px; font-weight:bold; background:#8F2F2F; } .price_table ul li:nth-child(3) { background:#FAE4E4; font-size:12px; font-weight:bold; } .price_table ul li:nth-child(n+4) { font-size:14px; } .price_table ul li:last-child a { color:#F0F0F0; text-decoration:none; font-weight:bold; display:block; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px solid #c4cbcc; padding:10px; margin:5px 0; background: #0061bb; } |