Flat UI Package Pricing Table cho Blogger

Create Flat UI Package Pricing Table for Blogger

Hôm nay Iris Tips sẽ chia sẻ cho các bạn CSS của Pricing Table. Nhờ vào CSS này bạn có thể tạo các bảng báo giá danh cho trang mua bán template, sản phẩm... theo phong cách khá chuyên nghiệp đấy.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

.table {
width:30%;
margin:0 10px;
background:#fff;
text-align:center;
float:left;
}
.table.standard {
background:rgba(0,245,255,0.1);
}

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

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

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

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

HTML

2Dán đoạn code bên dưới tại nơi bạn muốn để Pricing Table

<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>

• DEMO

See the Pen rORMqm by Iris Tips (@IrisTips) on CodePen.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by softglad/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm