.

Wednesday, September 4, 2013

How To Create Flat UI Pricing Table


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&#215;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&#215;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&nbsp;MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
 </ul>
 <a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>
Now we have to dress up the table with simple flat design. But look great. Let us jump to CSS section.

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);
}
The name (h2 titles) of each table have got pretty style with background and beautiful font named Armata. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.table h2 {
 color:#fff;
 margin:0;
 padding:5px 0;
 text-align:center;
 font:Bold 25px armata;
 cursor:pointer;
 z-index:999;
 position:relative;
}
.table.economic h2 {
 background:#4593e3;
}
.table.standard h2 {
 background:#16a085;
}
.table.premium h2 {
 background:#cd4436;
}
The prices of each table have it own different value ($10, $45 and $99). So I made different backgrounds. 
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;
}
As usual pricing table are built in HTML table. But here I have used normal <div> and <ul>. Let us style the list with border for belonging to their color. 
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;
}
Now we can give a beautiful button with animation using transition and translateY. Button had pseudo element too. 
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.3s;
 -moz-transition:-moz-transform 0.3s;
 transition:transform 0.3s;
 padding:5px 35px;
 font:Bold 20px Armata;
}
.table .button span::before {
 position:absolute;
 top:100%;
 content:attr(data-hover);
 font-weight:700;
 -webkit-transform:translate3d(0,5px,10px);
 -moz-transform:translate3d(0,5px,10px):
 transform:translate3d(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

 

 about US


SoftGlad is a leading blog which providing Latest News, Social Media, Web Design, Blogging, PC tutorials and many other stuffs. We will always trying to relate with our valuable readers by updating the quality contents. There are millions of blogs which providing technological knowledge but our goal is to provide dainty articles and useful technological knowledge.
See More

RECENT POSTS


RECENT Comment