CSS Pricing Table
BLUF: Styling is what brings the web to life, and mastering CSS Pricing Table is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS Pricing Table
CSS is all about presentation. Discover how CSS Pricing Table works to transform plain HTML into a premium user experience in the guide below.
In this guide, we will explore the pricing table extensively through a range of examples. We will craft a pricing table using CSS. Pricing tables play a crucial role in aiding website visitors to swiftly compare different packages, enabling them to effortlessly identify the most suitable option for their needs.
Example 1:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of CSS Pricing Table </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</script>
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </script>
<style>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
html {
box-sizing: border-box;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: rgb(33,31,35);
background-repeat: no-repeat;
@include filter-gradient(#53455b, #201e22, horizontal);
@include background-image(radial-gradient(circle at top, rgba(83,69,91,1) 0,rgba(32,30,34,1) 70%));
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 100%;
min-height: 100%;
line-height: 1.5;
padding: 2.5em 0;
}
h1 {
margin: 5px;
padding: 10px;
text-align: center;
color: yellow;
}
h2 {
margin: 2px;
padding: 2px;
text-align: center;
color: yellow;
}
.container {
margin: 5 auto;
width: 90%;
max-width: 1200px;
}
.group:after {
content: " ";
display: table;
clear: both;
}
.grid-1-5 {
border: 2px solid #5d4e65;
min-height: 400px;
padding: 1.15em;
margin-left: 100px;
position: relative;
text-align: center;
transition: all .2s ease-in-out;
@media screen and (min-width: 700px) {
& {
float: left;
width: 50%;
}
&:nth-child(odd) {
clear: left;
}
}
@media screen and (min-width: 800px) {
& {
width: 33.3333333%;
}
&:nth-child(3n+1) {
clear: left;
}
&:nth-child(odd) {
clear: none;
}
}
@media screen and (min-width: 1120px) {
& {
width: 20%;
}
&:nth-child(odd), &:nth-child(3n+1) {
clear: none;
}
}
}
.grid-1-5:hover {
background-color: rgb(83,69,91);
@include filter-gradient(#53455b, #201d22, vertical);
@include background-image(linear-gradient(top, rgba(83,69,91,1) 0%,rgba(32,29,34,1) 100%));
border-top: 2px solid #ec7a37;
border-bottom: 2px solid #ff4f69;
box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 1);
transform: scale(1.025);
z-index: 2;
&:before {
content: " ";
position: absolute;
background-color: rgb(246,125,53);
@include filter-gradient(#f67d35, #ff4f68, vertical);
@include background-image(linear-gradient(top, rgba(246,125,53,1) 0%,rgba(255,79,104,1) 100%));
top: -2px;
bottom: -2px;
width: 2px;
}
&:after {
content: " ";
position: absolute;
background-color: rgb(246,125,53);
@include filter-gradient(#f67d35, #ff4f68, vertical);
@include background-image(linear-gradient(top, rgba(246,125,53,1) 0%,rgba(255,79,104,1) 100%));
top: -2px;
bottom: -2px;
width: 2px;
}
&:before {
left: -2px;
}
&:after {
right: -2px;
}
& .button {
background-color: rgb(238,122,54);
@include filter-gradient(#ee7a36, #eb495d, horizontal);
@include background-image(linear-gradient(left, rgba(238,122,54,1) 0%,rgba(235,73,93,1) 100%));
}
}
h2, h3, p, ul {
margin: 0
}
h2 {
font-size: 1em;
font-weight: 400;
margin: 0 0 0.5em;
}
h3 {
font-size: 1.5em;
letter-spacing: 0.0625em;
margin: 0 0 0.3333333333333333em;
}
p {
font-size: 0.875em;
}
p, ul {
margin:0 0 1.5em
}
ul {
color: #796583;
font-size: 0.75em;
list-style-type: none;
padding: 0;
li {
margin: 0 0 0.8333333333333333em;
}
}
.button {
background-color: #9c83aa;
border-radius: 20px;
color: #fff;
font-size: 1em;
font-weight: 700;
padding: 0.75em 1.5em;
position: absolute;
bottom: 1.25em;
left: 50%;
margin-left: -60px;
text-decoration: none;
width: 120px;
}
.uppercase, .button, h2 {
text-transform: uppercase;
}
sup, .small {
font-size: 0.6125em;
}
</style>
<body>
<h1> Example </h1>
<h2> CSS Pricing Table </h2>
<div class = "container group">
<div class = "grid-1-5">
<h2> Basic </h2>
<h3> <span class = "uppercase"> Free </span> </h3>
<p> 10,000 monthly visits </p>
<ul>
<li> Limited Email Support </li>
<li> Unlimited Data Transfer </li>
<li> 10GB Local Storage </li>
</ul>
</div>
<div class = "grid-1-5">
<h2> Startup </h2>
<h3> <sup> $ </sup> 79 <span class = "small"> /mo </span> </h3>
<p> 25,000 monthly visits </p>
<ul>
<li> Limited Email Support </li>
<li> Unlimited Data Transfer </li>
<li> 20GB Local Storage </li>
</ul>
</div>
<div class = "grid-1-5">
<h2> Premium </h2>
<h3> <sup> $ </sup> 499 <span class = "small"> /mo </span> </h3>
<p> 225,000 monthly visits </p>
<ul>
<li> Email Support </li>
<li> Phone Support </li>
<li> Unlimited Data Transfer </li>
</ul>
</div>
</div>
</body>
</html>
Explanation:
In the previous example, we generated a pricing chart using CSS.
Output:
Following is the output of this example.
Example 2:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of CSS Pricing Table </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</script>
<script src =
"https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image"> </script>
<style>
body {
-webkit-font-smoothing: antialiased;
background-color: rgba(0, 0, 0, 0.8);
margin: 0;
}
section {
color: #7a90ff;
padding: 2em 0;
min-height: 100%;
position: relative;
-webkit-font-smoothing: antialiased;
z-index:10;
}
.pricing {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
margin: 0 auto;
}
.pricing-item {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 230px;
flex: 0 1 230px;
}
.pricing-action {
color: inherit;
border: none;
background: none;
cursor: pointer;
}
.pricing-action:focus {
outline: none;
}
.pricing-feature-list {
text-align: left;
}
.pricing-palden .pricing-item {
font-family: 'Open Sans', sans-serif;
cursor: default;
color: #84697c;
background: #fff;
box-shadow: 0 0 10px rgba(46, 59, 125, 0.23);
border-radius: 20px 20px 10px 10px;
margin: 1em;
}
@media screen and (min-width: 66.25em) {
.pricing-palden .pricing-item {
margin: 1em -0.5em;
}
.pricing-palden .pricing__item--featured {
margin: 0;
z-index: 10;
box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
}
}
.pricing-palden .pricing-deco {
border-radius: 10px 10px 0 0;
background: linear-gradient(135deg,#4097f9,#0af0c7);
padding: 4em 0 9em;
position: relative;
}
.pricing-palden .pricing-deco-img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 160px;
}
.pricing-palden .pricing-title {
font-size: 0.75em;
margin: 0;
text-transform: uppercase;
letter-spacing: 5px;
color: #fff;
}
.pricing-palden .deco-layer {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.pricing-palden .pricing-item:hover .deco-layer--1 {
-webkit-transform: translate3d(15px, 0, 0);
transform: translate3d(15px, 0, 0);
}
.pricing-palden .pricing-item:hover .deco-layer--2 {
-webkit-transform: translate3d(-15px, 0, 0);
transform: translate3d(-15px, 0, 0);
}
.pricing-palden .icon {
font-size: 2.5em;
}
.pricing-palden .pricing-price {
font-size: 5em;
font-weight: bold;
padding: 0;
color: #fff;
margin: 0 0 0.25em 0;
line-height: 0.75;
}
.pricing-palden .pricing-currency {
font-size: 0.15em;
vertical-align: top;
}
.pricing-palden .pricing-period {
font-size: 0.15em;
padding: 0 0 0 0.5em;
font-style: italic;
}
.pricing-palden .pricing__sentence {
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
}
.pricing-palden .pricing-feature-list {
margin: 0;
padding: 0.25em 0 2.5em;
list-style: none;
text-align: center;
}
.pricing-palden .pricing-feature {
padding: 1em 0;
}
.pricing-palden .pricing-action {
font-weight: bold;
margin: auto 3em 2em 3em;
padding: 1em 2em;
color: #fff;
border-radius: 30px;
background: linear-gradient(135deg,#a93bfe,#584efd);
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.pricing-palden .pricing-action:hover {
background: linear-gradient(135deg,#fd7d57,#f55d59);
}
.pricing-palden .pricing-action:focus {
background: linear-gradient(135deg,#fd7d57,#f55d59);
}
.pricing-palden .pricing-item--featured .pricing-deco {
padding: 5em 0 8.885em 0;
}
@import url(//fonts.googleapis.com/css?family=Lato:300:400);
.header {
position: relative;
text-align: center;
background-image: radial-gradient(circle at 39% 47%, rgba(107, 107, 107,0.08) 0%, rgba(107, 107, 107,0.08) 33.333%,rgba(72, 72, 72,0.08) 33.333%, rgba(72, 72, 72,0.08) 66.666%,rgba(36, 36, 36,0.08) 66.666%, rgba(36, 36, 36,0.08) 99.999%));
color: white;
}
.inner-header {
height:100%;
width:100%;
margin: 0;
padding: 0;
}
.flex {
justify-content: center;
align-items: center;
text-align: center;
}
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
</style>
<body>
<div class="header">
<div class="inner-header flex">
<section>
<center><h1 style="font-size: 2.5em;font-family: 'Open Sans', sans-serif; color: white;"> Example : CSS Pricing Table </h1></center>
<div class="pricing pricing-palden">
<div class="pricing-item features-item ja-animate" data-animation="move-from-bottom" data-delay="item-0" style="min-height: 497px;">
<div class="pricing-deco">
<svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" y="0px">
<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
<path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
</svg>
<div class="pricing-price"><span class="pricing-currency">$</span>500
<span class="pricing-period">/ day</span>
</div>
<h3 class="pricing-title">Basic</h3>
</div>
<button class="pricing-action">Choose plan</button>
</div>
<div class="pricing-item features-item ja-animate pricing__item--featured" data-animation="move-from-bottom" data-delay="item-1" style="min-height: 497px;">
<div class="pricing-deco" style="background: linear-gradient(135deg,#a93bfe,#584efd)">
<svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" y="0px">
<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
</svg>
<div class="pricing-price"><span class="pricing-currency">$</span>2499
<span class="pricing-period">/ month</span>
</div>
<h3 class="pricing-title">Premium</h3>
</div>
<button class="pricing-action">Choose plan</button>
</div>
<div class="pricing-item features-item ja-animate" data-animation="move-from-bottom" data-delay="item-2" style="min-height: 497px;">
<div class="pricing-deco">
<svg class="pricing-deco-img" enable-background="new 0 0 300 100" height="100px" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px" xml:space="preserve" y="0px">
<path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
<path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
</svg>
<div class="pricing-price"><span class="pricing-currency">$</span>999
<span class="pricing-period">/ week</span>
</div>
<h3 class="pricing-title">Standard</h3>
</div>
</div>
</div>
</section>
</div>
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
</svg>
</div>
</div>
</body>
</html>
Explanation:
In the previous instance, we generated a pricing chart using CSS.
Output:
Following is the output of this example.
Example 3:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of CSS Pricing Table </title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</script>
<script src =
"https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image"> </script>
<style>
body {
background-color: rgb(33,31,35);
background-repeat: no-repeat;
@include filter-gradient(#53455b, #201e22, horizontal);
@include background-image(radial-gradient(circle at top, rgba(83,69,91,1) 0,rgba(32,30,34,1) 70%));
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 100%;
min-height: 100%;
line-height: 1.5;
padding: 2.5em 0;
}
h1 {
margin: 5px;
padding: 10px;
text-align: center;
color: yellow;
}
h2 {
margin: 2px;
padding: 2px;
text-align: center;
color: yellow;
}
#pricing-table {
margin: 100px auto;
text-align: center;
width: 892px; /* total computed width = 222 x 3 + 226 */
}
</style>
<body>
<h1> Example : CSS Pricing Table </h1>
<div class="plan">
<h3>Enterprise<span>$59</span></h3>
<a class="signup" href="">Sign up</a>
</div>
<div class="plan" id="most-popular">
<h3>Professional<span>$29</span></h3>
<a class="signup" href="">Sign up</a>
</div>
<div class="plan">
<h3>Standard<span>$17</span></h3>
<a class="signup" href="">Sign up</a>
</div>
<div class="plan">
<h3>Basic<span>$9</span></h3>
<a class="signup" href="">Sign up</a>
</div>
</div>
</body>
</html>
Explanation:
In the preceding example, we generated a pricing chart using CSS.
Output:
Following is the output of this example.
