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 –
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;
}
|