Today I'm going show you how to create flat UI pricing table. Table is an element which can represent details of product or anything. Nowadays Flat UI is web design trend. So I made this table as Flat UI which mean simple and no more effect. But it look great and effective.
There are many popular hosting services use this type of pricing table for their users to understand different product price belonging to the list provided in it. So being attractive pricing table can be more eye-catching for those users.
I'm sure, this pricing table will be utilize by hosting, product, domain registration services etc, because this are essential for those services.
HTML
The structure is pretty simple. In the mark up I have used div and unordered list instead of table. Each column is inside the <div> and given class="table". Each pricing table have its own extra class added with economic, standard and premium.
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
| < div class = "table economic" > < h2 >Economic</ h2 > < span class = "price" >$10/year</ span > < ul > < li >20 GB space</ li > < li >Unlimited Bandwidth</ li > < li >15 Email Accounts</ li > < li >10 MySQL Database</ li > < li >24×7 Online Support</ li > < li >100% Money Back Guarantee</ li > </ ul > < a class = "button" href = "#" >< span data-hover = "Buy" >Buy</ span ></ a > </ div > < div class = "table standard" > < h2 >Standard</ h2 > < span class = "price" >$45/year</ span > < ul > < li >100 GB space</ li > < li >Unlimited Bandwidth</ li > < li >50 Email Accounts</ li > < li >35 MySQL Database</ li > < li >24×7 Online Support</ li > < li >100% Money Back Guarantee</ li > </ ul > < a class = "button" href = "#" >< span data-hover = "Buy" >Buy</ span ></ a > </ div > < div class = "table premium" > < h2 >Premium</ h2 > < span class = "price" >$99/year</ span > < ul > < li >Unlimited space</ li > < li >Unlimited Bandwidth</ li > < li >Unlimited Email Accounts</ li > < li >Unlimited MySQL Database</ li > < li >24×7 Online Support</ li > < li >100% Money Back Guarantee</ li > </ ul > < a class = "button" href = "#" >< span data-hover = "Buy" >Buy</ span ></ a > </ div > |
CSS
Now let's style whole .table class. Here I add width as 30%. You may have to change if your over container is too big.
1
2
3
4
5
6
7
8
9
10
| .table { width : 30% ; margin : 0 10px ; background : #fff ; text-align : center ; float : left ; } .table.standard { background :rgba( 0 , 245 , 255 , 0.1 ); } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .table h 2 { color : #fff ; margin : 0 ; padding : 5px 0 ; text-align : center ; font :Bold 25px armata; cursor : pointer ; z-index : 999 ; position : relative ; } .table.economic h 2 { background : #4593e3 ; } .table.standard h 2 { background : #16a085 ; } .table.premium h 2 { background : #cd4436 ; } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .table .price { font : 15px Armata; color : #fff ; padding : 10px 25px ; display :inline- block ; border-radius: 0px 0px 100% 100% ; cursor : pointer ; } .table.economic .price { background : #4593e3 ; } .table.standard .price { background : #16a085 ; } .table.premium .price { background : #cd4436 ; } .table:hover .price { border-radius: 0 ; } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .table ul { margin : 9px 0 ; padding : 0px ; } .table ul li { list-style : none ; font : 15px Armata; padding : 10px 5px ; border : 1px solid rgba( 238 , 238 , 238 , 0.29 ); margin : 2px 10px ; } .table.economic ul li:hover { border-color : #4593e3 ; } .table.premium ul li:hover { border-color : #cd4436 ; } .table.standard ul li:hover { border-color : #16a085 ; } |
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
| .table a { text-decoration : none ; display :inline- block ; overflow : hidden ; color : #000 ; margin : 1px 0 10px ; text-transform : uppercase ; } .table a:hover { color : #fff ; } .table .button span { position : relative ; display :inline- block ; -webkit-transition:-webkit-transform 0.3 s; -moz-transition:-moz-transform 0.3 s; transition:transform 0.3 s; padding : 5px 35px ; font :Bold 20px Armata; } .table .button span::before { position : absolute ; top : 100% ; content : attr (data-hover); font-weight : 700 ; -webkit-transform:translate 3 d( 0 , 5px , 10px ); -moz-transform:translate 3 d( 0 , 5px , 10px ): transform:translate 3 d( 0 , 5px , 10px ): } .table .button:hover span,.table .button:focus span { -webkit-transform:translateY( -100% ); -moz-transform:translateY( -100% ); transform:translateY( -100% ); } .table.economic a { border : 2px solid #4593e3 ; } .table.economic a:hover { background : #4593e3 ; } .table.standard a { border : 2px solid #16a085 ; } .table.standard a:hover { background : #16a085 ; } .table.premium a { border : 2px solid #cd4436 ; } .table.premium a:hover { background : #cd4436 ; } |
That's all. i hope you like my Pricing Table. Let me know your feedback about this esign through comment below.
Spread The Love, Share Our Article
0 comments:
Post a Comment