If you are looking for a professional pricing table to showcase a subscription plan, look no further! Here you will find exactly what you need! You can choose between 20 free CSS snippets for pricing tables with clean and intuitive designs that you can use for different services or products. All of these items have neat hover effects, which makes them even more user-friendly and appealing.
This roundup contains amazing pricing tables with beautiful designs and various color modes and styles to choose from. They all have responsive designs, which means they will be perfectly readable on any devices.
Browse through all of these free CSS snippets for pricing tables and select the ones that best fit your website’s style. Help your users choose the perfect plan for their personalized needs!
Want to learn how to implement these CSS snippets? Take a look at these comprehensive CSS tutorials and CSS rules!
Dark themed responsive pricing table
Here is a beautiful pricing table that you can easily implement into your websites. It has a beautiful dark themed design with a responsive layout that will fit any screen.
<div class="snip1464">
<div class="plan">
<header>
<h4 class="plan-title">
Starter
</h4>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>250Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Basic
</h4>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>500Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h4 class="plan-title">
Pro
</h4>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>2000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Ultra
</h4>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>10000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/10fYcHs);
.snip1464 {
font-family: 'Source Sans Pro', Arial, sans-serif;
color: #ffffff;
text-align: left;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 50px 10px;
}
.snip1464 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1464 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
background-color: #1a1a1a;
}
.snip1464 .plan:hover i,
.snip1464 .plan.hover i {
transform: scale(1.2);
transform: scale(1.2);
}
.snip1464 .plan:first-of-type {
border-radius: 8px 0 0 8px;
border-left: 1px solid #333333;
}
.snip1464 .plan:last-of-type {
border-radius: 0 8px 8px 0;
border-right: 1px solid #333333;
}
.snip1464 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1464 header {
line-height: 70px;
color: #ffffff;
}
.snip1464 .plan-title {
background-color: #156dab;
position: relative;
margin: 20px 0;
padding: 0 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.snip1464 .plan-title:after {
position: absolute;
content: '';
top: 100%;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #156dab transparent transparent;
}
.snip1464 .plan-cost {
position: absolute;
top: 20px;
right: 0;
padding: 0 20px;
text-align: right;
}
.snip1464 .plan-price {
font-weight: 600;
font-size: 2em;
}
.snip1464 .plan-type {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1464 .plan-features {
padding: 0 0 20px;
margin: 0;
list-style: outside none none;
font-size: 0.9em;
}
.snip1464 .plan-features li {
padding: 8px 20px;
}
.snip1464 .plan-features i {
margin-right: 8px;
color: rgba(255, 255, 255, 0.5);
}
.snip1464 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1464 .plan-select a {
background-color: #156dab;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1464 .plan-select a:hover {
background-color: #1b8ad8;
}
.snip1464 .featured {
margin-top: -10px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
z-index: 1;
border-radius: 8px;
border: 1px solid #333333;
}
.snip1464 .featured header {
line-height: 90px;
}
.snip1464 .featured .plan-select {
padding: 30px 20px;
}
@media only screen and (max-width: 767px) {
.snip1464 .plan {
width: 50%;
}
.snip1464 .plan-title,
.snip1464 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1464 .plan-select,
.snip1464 .featured .plan-select {
padding: 20px;
}
.snip1464 .featured {
margin-top: 0;
}
.snip1464 .featured header {
line-height: 70px;
}
}
@media only screen and (max-width: 440px) {
.snip1464 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Dark themed pricing table
This is a nice CSS snippet of a dark themed pricing table that is available to download for free. It has a neat hover effect that individualizes each plan.
<div class="snip1299">
<div class="plan">
<header>
<h4 class="plan-title">
Starter
</h4>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>250Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Basic
</h4>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>500Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h4 class="plan-title">
Professional
</h4>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>2000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Ultra
</h4>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>10000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/2jNawgi);
@import url(http://ift.tt/2iQEcoC);
.snip1299 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 50px 10px 10px;
}
.snip1299 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
overflow: hidden;
background-color: #e6e6e6;
border: 5px solid #1e1e1e;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.snip1299 .plan:hover i,
.snip1299 .plan.hover i {
transform: scale(1.2);
transform: scale(1.2);
}
.snip1299 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1299 header {
background-color: #333333;
color: #ffffff;
}
.snip1299 .plan-title {
background-color: #191919;
position: relative;
top: 0;
font-weight: 500;
margin: 0;
padding: 10px 0 0;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
}
.snip1299 .plan-title:after {
width: 0;
height: 0;
border-style: solid;
border-width: 24px 150px 0 150px;
border-color: #191919 transparent transparent transparent;
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
transform: translateX(-50%);
}
.snip1299 .plan-cost {
padding: 40px 0 20px;
}
.snip1299 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 2em;
}
.snip1299 .plan-type {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1299 .plan-features {
padding: 0;
margin: 0;
list-style: outside none none;
font-size: 0.8em;
}
.snip1299 .plan-features li {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 5%;
font-weight: 500;
}
.snip1299 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1299 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1299 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
background-color: #333333;
}
.snip1299 .plan-select a {
background-color: #1e1e1e;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.snip1299 .plan-select a:hover {
background-color: #2b2b2b;
}
.snip1299 .featured {
margin-top: -10px;
border: 5px solid #a85913;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.snip1299 .featured header {
background-color: #924d10;
}
.snip1299 .featured .plan-title {
background-color: #4d2909;
}
.snip1299 .featured .plan-title:after {
border-color: #4d2909 transparent transparent transparent;
}
.snip1299 .featured .plan-select {
background-color: #cd6d17;
padding: 30px 20px;
}
.snip1299 .featured .plan-select a {
background-color: #4d2909;
}
@media only screen and (max-width: 767px) {
.snip1299 .plan {
width: 50%;
}
.snip1299 .plan-title,
.snip1299 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1299 .plan-select,
.snip1299 .featured .plan-select {
padding: 20px;
}
.snip1299 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1299 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Dark themed responsive pricing table
Take a look at this great freebie that you can use for payments or subscriptions on your sites. This pricing table has a responsive design and will be an asset to your collection.
<div class="snip1265">
<div class="plan">
<header><i class="ion-ios-navigate-outline"></i>
<h4 class="plan-title">
Starter
</h4>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li>5GB Linux Web Space
</li>
<li>5 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>250Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header><i class="ion-ios-world"></i>
<h4 class="plan-title">
Basic
</h4>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li>10GB Linux Web Space
</li>
<li>10 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>500Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header><i class="ion-ios-people"></i>
<h4 class="plan-title">
Professional
</h4>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li>25GB Linux Web Space
</li>
<li>25 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>2000Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header><i class="ion-ios-speedometer"></i>
<h4 class="plan-title">
Ultra
</h4>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li>100GB Linux Web Space
</li>
<li>Unlimited MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>10000Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/2jNawgi);
@import url(http://ift.tt/2iQEcoC);
.snip1265 {
font-family: 'Raleway', Arial, sans-serif;
color: #ffffff;
text-align: left;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 50px 10px 10px;
}
.snip1265 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
background-color: #262626;
border: 1px solid #1e1e1e;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
.snip1265 .plan:hover,
.snip1265 .plan.hover {
background-color: #1c1c1c;
}
.snip1265 .plan:hover i,
.snip1265 .plan.hover i {
transform: scale(1.2);
transform: scale(1.2);
}
.snip1265 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1265 header {
position: relative;
padding: 20px 10px;
}
.snip1265 header i {
font-size: 56px;
margin: 0 15px;
color: #f39c12;
display: inline-block;
float: left;
}
.snip1265 .plan-title {
top: 0;
font-weight: 800;
margin: 10px 0 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.snip1265 .plan-cost {
margin: 0;
opacity: 0.2;
}
.snip1265 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 1.3em;
}
.snip1265 .plan-type {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1265 .plan-features {
padding: 0;
margin: 0 0 40px;
text-align: center;
list-style: outside none none;
font-size: 0.8em;
text-align: left;
}
.snip1265 .plan-features li {
padding: 5px 5%;
font-weight: 500;
opacity: 0.5;
border-left: 5px solid #f39c12;
margin: 2px 20px;
}
.snip1265 .plan-select {
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
}
.snip1265 .plan-select a {
color: #ffffff;
text-decoration: none;
padding: 15px 20px;
margin: 20px;
border-radius: 40px;
font-size: 0.75em;
font-weight: 800;
text-transform: uppercase;
display: inline-block;
background-color: #f39c12;
}
.snip1265 .plan-select a:hover {
background-color: #262626;
}
.snip1265 .featured {
margin-top: -10px;
background-color: #262626;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.snip1265 .featured .plan-select a {
margin: 30px 20px;
}
@media only screen and (max-width: 767px) {
.snip1265 .plan {
width: 50%;
}
.snip1265 .plan-title,
.snip1265 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1265 .plan-select a,
.snip1265 .featured .plan-select a {
margin: 20px;
}
.snip1265 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1265 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Responsive pricing table
Here is a wonderful template of a pricing table that you can download for free. Take a look at its features and see if it fits your website.
<div class="snip1240">
<div class="plan">
<header>
<h3 class="plan-title">
Starter
</h3>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/mo</span></div>
</header>
<ul class="plan-features">
<li>5GB Linux Web Space
</li>
<li>5 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>250Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h3 class="plan-title">
Basic
</h3>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/mo</span></div>
</header>
<ul class="plan-features">
<li>10GB Linux Web Space
</li>
<li>10 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>500Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h3 class="plan-title">
Professional
</h3>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/mo</span></div>
</header>
<ul class="plan-features">
<li>25GB Linux Web Space
</li>
<li>25 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>2000Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h3 class="plan-title">
Ultra
</h3>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/mo</span></div>
</header>
<ul class="plan-features">
<li>100GB Linux Web Space
</li>
<li>Unlimited MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>10000Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/2jNawgi);
@import url(http://ift.tt/2iQEcoC);
.snip1240 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 50px 10px;
}
.snip1240 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
background-color: #ffffff;
border: 1px solid #07151f;
}
.snip1240 .plan:hover .plan-cost,
.snip1240 .plan.hover .plan-cost {
transform: scale(1.1);
transform: scale(1.1);
}
.snip1240 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1240 header {
position: relative;
background-color: #0d293c;
color: #ffffff;
padding: 20px 20px;
}
.snip1240 .plan-title {
top: 0;
font-size: 1.4em;
font-weight: 500;
padding-bottom: 10px;
margin: 0;
text-transform: uppercase;
}
.snip1240 .plan-cost {
background-color: #123851;
border-radius: 50%;
text-align: center;
line-height: 90px;
width: 90px;
height: 90px;
margin: 0 auto;
}
.snip1240 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 1.3em;
color: #ffffff;
}
.snip1240 .plan-type {
opacity: 0.8;
color: #ffffff;
font-size: 0.7em;
}
.snip1240 .plan-features {
padding: 0;
margin: 0;
text-align: center;
list-style: outside none none;
font-size: 0.8em;
}
.snip1240 .plan-features li {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 5%;
}
.snip1240 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1240 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1240 .plan-select {
background-color: #091b27;
}
.snip1240 .plan-select a {
color: #ffffff;
text-decoration: none;
padding: 20px;
width: 100%;
font-weight: 500;
text-transform: uppercase;
display: inline-block;
}
.snip1240 .plan-select a:hover {
background-color: #0d293c;
}
.snip1240 .featured {
margin-top: -10px;
background-color: #0d293c;
color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.snip1240 .featured .plan-select a {
padding: 35px 25px;
}
@media only screen and (max-width: 767px) {
.snip1240 .plan {
width: 50%;
}
.snip1240 .plan-select a,
.snip1240 .featured .plan-select a {
padding: 20px;
}
.snip1240 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1240 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Simple light text on dark responsive pricing table
This is a clean pricing table template with a simple but beautiful design. It is responsive and it will look beautifully on any screen.
<div class="snip1517">
<div class="plan">
<header>
<h4 class="plan-title">
Starter
</h4>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-android-remove"> </i>5GB Linux Web Space</li>
<li><i class="ion-android-remove"> </i>5 MySQL Databases</li>
<li><i class="ion-android-remove"> </i>Unlimited Email</li>
<li><i class="ion-android-remove"> </i>250Gb mo Transfer</li>
<li><i class="ion-android-remove"> </i>24/7 Tech Support</li>
<li><i class="ion-android-remove"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Basic
</h4>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-android-remove"> </i>10GB Linux Web Space</li>
<li><i class="ion-android-remove"> </i>10 MySQL Databases</li>
<li><i class="ion-android-remove"> </i>Unlimited Email</li>
<li><i class="ion-android-remove"> </i>500Gb mo Transfer</li>
<li><i class="ion-android-remove"> </i>24/7 Tech Support</li>
<li><i class="ion-android-remove"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h4 class="plan-title">
Professional
</h4>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-android-remove"> </i>25GB Linux Web Space</li>
<li><i class="ion-android-remove"> </i>25 MySQL Databases</li>
<li><i class="ion-android-remove"> </i>Unlimited Email</li>
<li><i class="ion-android-remove"> </i>2000Gb mo Transfer</li>
<li><i class="ion-android-remove"> </i>24/7 Tech Support</li>
<li><i class="ion-android-remove"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Ultra
</h4>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-android-remove"> </i>100GB Linux Web Space</li>
<li><i class="ion-android-remove"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-android-remove"> </i>Unlimited Email</li>
<li><i class="ion-android-remove"> </i>10000Gb mo Transfer</li>
<li><i class="ion-android-remove"> </i>24/7 Tech Support</li>
<li><i class="ion-android-remove"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/1yYEBJh);
.snip1517 {
font-family: 'Source Sans Pro', Arial, sans-serif;
color: #ffffff;
text-align: left;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 30px 10px;
}
.snip1517 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1517 .plan {
margin: 0 0.5%;
width: 24%;
padding-top: 10px;
position: relative;
float: left;
overflow: hidden;
background-color: #222f3d;
border-radius: 8px;
}
.snip1517 .plan:hover i,
.snip1517 .plan.hover i {
transform: scale(1.2);
transform: scale(1.2);
}
.snip1517 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1517 header {
color: #ffffff;
}
.snip1517 .plan-title {
line-height: 60px;
position: relative;
margin: 0;
padding: 0 20px;
font-size: 1.6em;
letter-spacing: 2px;
font-weight: 700;
}
.snip1517 .plan-title:after {
position: absolute;
content: '';
top: 100%;
left: 20px;
width: 30px;
height: 3px;
background-color: #fff;
}
.snip1517 .plan-cost {
padding: 0 20px;
margin: 0;
}
.snip1517 .plan-price {
font-weight: 400;
font-size: 2.8em;
margin: 10px 0;
display: inline-block;
}
.snip1517 .plan-type {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1517 .plan-features {
padding: 0 0 20px;
margin: 0;
list-style: outside none none;
font-size: 0.9em;
}
.snip1517 .plan-features li {
padding: 8px 20px;
}
.snip1517 .plan-features i {
margin-right: 8px;
color: rgba(255, 255, 255, 0.5);
}
.snip1517 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1517 .plan-select a {
background-color: #156dab;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1517 .plan-select a:hover {
background-color: #1b8ad8 !important;
}
.snip1517 .featured {
margin-top: -10px;
z-index: 1;
border-radius: 8px;
border: 2px solid #156dab;
background-color: #156dab;
}
.snip1517 .featured .plan-select {
padding: 30px 20px;
}
.snip1517 .featured .plan-select a {
background-color: #10507e;
}
@media only screen and (max-width: 767px) {
.snip1517 .plan {
width: 49%;
margin: 0.5%;
}
.snip1517 .plan-title,
.snip1517 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1517 .plan-select,
.snip1517 .featured .plan-select {
padding: 20px;
}
.snip1517 .featured {
margin-top: 0;
}
.snip1517 .featured header {
line-height: 70px;
}
}
@media only screen and (max-width: 440px) {
.snip1517 .plan {
margin: 0.5% 0;
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Pricing table with title, price, and list
Here is a great CSS snippet for pricing tables that you can use right away. It uses beautiful colors and it has a pleasing design. Download and use it for subscriptions.
<div class="snip1404">
<div class="plan">
<header>
<h4 class="plan-title">
Starter
</h4>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>250Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Basic
</h4>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>500Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h4 class="plan-title">
Professional
</h4>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>2000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Ultra
</h4>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>10000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/10fYcHs);
.snip1404 {
font-family: 'Source Sans Pro', Arial, sans-serif;
color: #ffffff;
text-align: left;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 50px 10px;
}
.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1404 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 3px solid #442232;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
background-color: #5f3047;
}
.snip1404 .plan:hover i,
.snip1404 .plan.hover i {
transform: scale(1.2);
transform: scale(1.2);
}
.snip1404 .plan:first-of-type {
border-radius: 8px 0 0 8px;
}
.snip1404 .plan:last-of-type {
border-radius: 0 8px 8px 0;
}
.snip1404 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #5f3047;
color: #ffffff;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title:after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}
.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin: 0;
list-style: outside none none;
}
.snip1404 .plan-features li {
padding: 8px 5%;
}
.snip1404 .plan-features i {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #442232;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #552a3f;
}
.snip1404 .featured {
margin-top: -10px;
border-color: #331926;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
z-index: 1;
border-radius: 8px;
}
.snip1404 .featured .plan-select {
padding: 30px 20px;
}
@media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .featured .plan-select {
padding: 20px;
}
.snip1404 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Dark themed responsive pricing table
This is a nice CSS snippet freebie that you can use for subscriptions on your site. It has a responsive design and it will look beautifully on any device.
<div class="snip1276">
<div class="plan">
<header>
<h4 class="plan-title">
Starter
</h4>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>250Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Basic
</h4>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>500Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h4 class="plan-title">
Professional
</h4>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>2000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Ultra
</h4>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>10000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/2jNawgi);
@import url(http://ift.tt/2iQEcoC);
.snip1276 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 50px 10px 10px;
}
.snip1276 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
overflow: hidden;
background-color: #e6e6e6;
border: 5px solid #1e1e1e;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.snip1276 .plan:hover i,
.snip1276 .plan.hover i {
transform: scale(1.2);
transform: scale(1.2);
}
.snip1276 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1276 header {
position: relative;
background-color: #191919;
color: #ffffff;
padding: 20px 20px;
}
.snip1276 header:after {
width: 0;
height: 0;
border-style: solid;
border-width: 24px 150px 0 150px;
border-color: #191919 transparent transparent transparent;
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
transform: translateX(-50%);
}
.snip1276 .plan-title {
top: 0;
font-weight: 500;
margin: 8px 0;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
}
.snip1276 .plan-cost {
margin: 8px 0 0;
}
.snip1276 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 2em;
color: #ffffff;
}
.snip1276 .plan-type {
opacity: 0.8;
color: #ffffff;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1276 .plan-features {
padding: 40px 0 0;
margin: 0;
list-style: outside none none;
font-size: 0.8em;
}
.snip1276 .plan-features li {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 5%;
font-weight: 500;
}
.snip1276 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1276 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1276 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
}
.snip1276 .plan-select a {
background-color: #1e1e1e;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.snip1276 .plan-select a:hover {
background-color: #2b2b2b;
}
.snip1276 .featured {
margin-top: -10px;
border: 5px solid #2b3c4e;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.snip1276 .featured header {
background-color: #222f3d;
}
.snip1276 .featured header:after {
border-color: #222f3d transparent transparent transparent;
}
.snip1276 .featured .plan-select {
padding: 30px 20px;
}
.snip1276 .featured .plan-select a {
background-color: #222f3d;
}
@media only screen and (max-width: 767px) {
.snip1276 .plan {
width: 50%;
}
.snip1276 .plan-title,
.snip1276 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1276 .plan-select,
.snip1276 .featured .plan-select {
padding: 20px;
}
.snip1276 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1276 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Dark themed responsive pricing table
Here is a CSS snippet for pricing tables that is available to download for free. It has a simple and elegant layout with a beautiful dark themed design.
<div class="snip1255">
<div class="plan">
<header>
<h4 class="plan-title">
Starter
</h4><i class="ion-ios-navigate-outline"></i>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li>5GB Linux Web Space
</li>
<li>5 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>250Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Basic
</h4><i class="ion-ios-world"></i>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li>10GB Linux Web Space
</li>
<li>10 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>500Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h4 class="plan-title">
Professional
</h4><i class="ion-ios-people"></i>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li>25GB Linux Web Space
</li>
<li>25 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>2000Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Ultra
</h4><i class="ion-ios-speedometer"></i>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li>100GB Linux Web Space
</li>
<li>Unlimited MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>10000Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/2jNawgi);
@import url(http://ift.tt/2iQEcoC);
.snip1255 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 50px 10px 10px;
}
.snip1255 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
background-color: #e6e6e6;
border: 1px solid #191919;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.snip1255 .plan:hover i,
.snip1255 .plan.hover i {
transform: scale(1.2);
transform: scale(1.2);
}
.snip1255 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1255 header {
position: relative;
background-color: #262626;
color: #ffffff;
padding: 20px 20px;
}
.snip1255 header i {
font-size: 56px;
margin: 8px 0;
color: #c0392b;
display: inline-block;
}
.snip1255 .plan-title {
top: 0;
font-weight: 500;
margin: 8px 0;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
}
.snip1255 .plan-cost {
margin: 8px 0;
}
.snip1255 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 1.3em;
color: #ffffff;
}
.snip1255 .plan-type {
opacity: 0.8;
color: #ffffff;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1255 .plan-features {
padding: 0;
margin: 0;
text-align: center;
list-style: outside none none;
font-size: 0.8em;
}
.snip1255 .plan-features li {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 5%;
font-weight: 500;
}
.snip1255 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1255 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1255 .plan-select {
background-color: #191919;
}
.snip1255 .plan-select a {
color: #ffffff;
text-decoration: none;
padding: 20px;
width: 100%;
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}
.snip1255 .plan-select a:hover {
background-color: #262626;
}
.snip1255 .featured {
margin-top: -10px;
background-color: #262626;
color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.snip1255 .featured .plan-select a {
padding: 35px 25px;
}
@media only screen and (max-width: 767px) {
.snip1255 .plan {
width: 50%;
}
.snip1255 .plan-title,
.snip1255 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1255 .plan-select a,
.snip1255 .featured .plan-select a {
padding: 20px;
}
.snip1255 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1255 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Pricing table with circle price tag
This is a beautiful pricing table design with a nice color scheme that you can easily insert into your websites. It highlights each plan as you hover over it.
<div class="snip1223">
<div class="plan">
<header>
<h3 class="plan-title">Starter</h3>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/mo</span></div>
</header>
<ul class="plan-features">
<li>5GB Linux Web Space
</li>
<li>5 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>250Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h3 class="plan-title">Basic</h3>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/mo</span></div>
</header>
<ul class="plan-features">
<li>10GB Linux Web Space
</li>
<li>10 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>500Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h3 class="plan-title">Professional</h3>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/mo</span></div>
</header>
<ul class="plan-features">
<li>25GB Linux Web Space
</li>
<li>25 MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>2000Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h3 class="plan-title">Ultra</h3>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/mo</span></div>
</header>
<ul class="plan-features">
<li>100GB Linux Web Space
</li>
<li>Unlimited MySQL Databases
</li>
<li>Unlimited Email
</li>
<li>10000Gb mo Transfer
</li>
<li>24/7 Tech Support
</li>
<li>Daily Backups
</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/2jNawgi);
@import url(http://ift.tt/2iQEcoC);
.snip1223 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 70px 10px 10px;
}
.snip1223 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
background-color: #ffffff;
border: 1px solid #260b08;
}
.snip1223 .plan:hover .plan-cost,
.snip1223 .plan.hover .plan-cost {
transform: scale(1.2) rotate(20deg);
transform: scale(1.2) rotate(20deg);
transform-origin: 50% 51%;
transform-origin: 50% 51%;
transform-origin: 50% 51%;
}
.snip1223 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1223 header {
position: relative;
background-color: rgba(0, 0, 0, 0.2);
}
.snip1223 .plan-title {
top: 0;
font-weight: 800;
padding: 45px 15px 35px;
margin: 0;
display: inline-block;
color: #262626;
text-transform: uppercase;
}
.snip1223 .plan-cost {
background-color: #6d2018;
border-radius: 50%;
text-align: center;
line-height: 80px;
width: 80px;
height: 80px;
position: absolute;
top: -40px;
right: 20px;
}
.snip1223 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 1.2em;
color: #ffffff;
}
.snip1223 .plan-type {
opacity: 0.8;
color: #ffffff;
font-size: 0.7em;
}
.snip1223 .plan-features {
padding: 0;
margin: 0;
text-align: center;
list-style: outside none none;
font-size: 0.8em;
}
.snip1223 .plan-features li {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 5%;
}
.snip1223 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1223 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1223 .plan-select {
background-color: #190806;
}
.snip1223 .plan-select a {
color: #ffffff;
text-decoration: none;
padding: 20px;
width: 100%;
font-weight: 500;
text-transform: uppercase;
display: inline-block;
}
.snip1223 .plan-select a:hover {
background-color: #43140f;
}
.snip1223 .featured {
margin-top: -10px;
background-color: #43140f;
color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.snip1223 .featured .plan-title,
.snip1223 .featured .plan-price {
color: #ffffff;
}
.snip1223 .featured .plan-title {
padding: 50px 15px 40px;
}
.snip1223 .featured .plan-select a {
padding: 25px;
}
@media only screen and (max-width: 767px) {
.snip1223 .plan {
width: 50%;
}
.snip1223 .plan-title,
.snip1223 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1223 .plan-select a,
.snip1223 .featured .plan-select a {
padding: 20px;
}
.snip1223 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1223 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Responsive pricing table with rounded edges
This is a neat CSS snippet that you can download for free. It has a responsive design with rounded edges. Take a look and see if it fits your website.
<div class="snip1207">
<div class="plan">
<h3 class="plan-title">
Starter
</h3>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>250Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<h3 class="plan-title">
Basic
</h3>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>500Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<h3 class="plan-title">
Professional
</h3>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>2000Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<h3 class="plan-title">
Ultra
</h3>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>10000Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/2jNawgi);
@import url(http://ift.tt/2iQEcoC);
.snip1207 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 40px 10px;
}
.snip1207 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
overflow: hidden;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.snip1207 .plan:first-of-type {
border-radius: 8px 0 0 8px;
}
.snip1207 .plan:last-of-type {
border-radius: 0 8px 8px 0;
}
.snip1207 * {
box-sizing: border-box;
box-sizing: border-box;
}
.snip1207 .plan-title {
font-weight: 800;
padding: 15px;
margin: 0;
background: rgba(0, 0, 0, 0.08);
color: #595959;
text-transform: uppercase;
}
.snip1207 .plan-cost {
padding: 20px 10px;
}
.snip1207 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 3em;
color: #2980b9;
}
.snip1207 .plan-type {
opacity: 0.6;
}
.snip1207 .plan-features {
padding: 0;
margin: 0;
text-align: left;
list-style: outside none none;
font-size: 0.8em;
}
.snip1207 .plan-features li {
border-top: 1px solid #d2d7e2;
padding: 10px 5%;
}
.snip1207 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1207 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1207 .plan-select {
border-top: 1px solid #d2d7e2;
padding: 30px 10px;
}
.snip1207 .plan-select a {
background-color: #2980b9;
color: #ffffff;
text-decoration: none;
padding: 0.5em 1em;
border-radius: 8px;
transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1207 .plan-select a:hover {
background-color: #409ad5;
}
.snip1207 .featured {
margin-top: -20px;
background-color: #2980b9;
color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
z-index: 1;
border-radius: 8px;
}
.snip1207 .featured .plan-title,
.snip1207 .featured .plan-price {
color: #ffffff;
}
.snip1207 .featured .plan-title {
padding: 25px 15px;
}
.snip1207 .featured .plan-select {
padding: 40px 10px;
}
.snip1207 .featured .plan-select a {
color: #2980b9;
background-color: #ffffff;
}
.snip1207 .featured .plan-select a:hover {
background-color: #409ad5;
color: #ffffff;
}
@media only screen and (max-width: 767px) {
.snip1207 .plan {
width: 50%;
border-radius: 0 !important;
}
.snip1207 .featured {
margin-top: 0;
border-radius: 0;
}
.snip1207 .featured .plan-title {
padding: 15px;
}
.snip1207 .featured .plan-select {
padding: 30px 10px;
}
}
@media only screen and (max-width: 440px) {
.snip1207 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Responsive Pricing Table with featured column
This is another great CSS snippet for pricing tables that you can easily implement into your websites. It has a beautiful design with a hover effect for each plan.
<div class="snip1214">
<div class="plan">
<h3 class="plan-title">
Starter
</h3>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>250Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<h3 class="plan-title">
Basic
</h3>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>500Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<h3 class="plan-title">
Professional
</h3>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>2000Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<h3 class="plan-title">
Ultra
</h3>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/ Monthly</span></div>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>10000Gb Monthly Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>
@import url(http://ift.tt/1G498Ii);
@import url(http://ift.tt/2jNawgi);
@import url(http://ift.tt/2iQEcoC);
.snip1214 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 40px 10px;
}
.snip1214 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.snip1214 * {
box-sizing: border-box;
box-sizing: border-box;
}
.snip1214 header {
position: relative;
}
.snip1214 .plan-title {
position: relative;
top: 0;
font-weight: 800;
padding: 5px 15px;
margin: 0 auto;
transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
display: inline-block;
background-color: #222f3d;
color: #ffffff;
text-transform: uppercase;
}
.snip1214 .plan-cost {
padding: 0px 10px 20px;
}
.snip1214 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 2.4em;
color: #34495e;
}
.snip1214 .plan-type {
opacity: 0.6;
}
.snip1214 .plan-features {
padding: 0;
margin: 0;
text-align: center;
list-style: outside none none;
font-size: 0.8em;
}
.snip1214 .plan-features li {
border-top: 1px solid #d2d7e2;
padding: 10px 5%;
}
.snip1214 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1214 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1214 .plan-select {
border-top: 1px solid #d2d7e2;
padding: 10px 10px 0;
}
.snip1214 .plan-select a {
background-color: #222f3d;
color: #ffffff;
text-decoration: none;
padding: 0.5em 1em;
transform: translateY(50%);
transform: translateY(50%);
font-weight: 800;
text-transform: uppercase;
display: inline-block;
}
.snip1214 .plan-select a:hover {
background-color: #46627f;
}
.snip1214 .featured {
margin-top: -10px;
background-color: #34495e;
color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.snip1214 .featured .plan-title,
.snip1214 .featured .plan-price {
color: #ffffff;
}
.snip1214 .featured .plan-cost {
padding: 10px 10px 20px;
}
.snip1214 .featured .plan-features li {
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.snip1214 .featured .plan-select {
padding: 20px 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
@media only screen and (max-width: 767px) {
.snip1214 .plan {
width: 50%;
}
.snip1214 .plan-title,
.snip1214 .plan-select a {
transform: translateY(0);
transform: translateY(0);
}
.snip1214 .plan-cost,
.snip1214 .featured .plan-cost {
padding: 20px 10px 20px;
}
.snip1214 .plan-select,
.snip1214 .featured .plan-select {
padding: 10px 10px 10px;
}
.snip1214 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1214 .plan {
width: 100%;
}
}
/* Demo purposes only */
body {
background-color: #212121;
}
Responsive pricing tables with Hover Effects
Here is a wonderful pricing table design that you can easily insert into your websites. It has beautiful colors and nice hover effect.
Pricing Tables
Take a look at this clean pricing table template with a responsive design. It will look beautifully on any screen. It has a nice hover effect that makes it more appealing.
Responsive Pricing Table
Here is a great CSS snippet for pricing tables that you can rapidly insert into your website. It has a responsive layout and it will look perfect on any device.
Pricing tables, membership plans
This is a useful CSS snippet of a pricing table that is ready to use. It has nice colors and it offers all the information you need about subscriptions. Download it and use it in your websites. Enjoy!
Bootstrap 3.0. responsive pricing tables
This is a beautiful pricing table with a responsive design. You can rapidly download and use it for subscriptions and membership. Take a look and see if it suits your website.
Pricing Tables Bootstrap 3.3.0 Snippet
Here is a CSS snippet for pricing table with a clean and simple design. It has a responsive layout that will fit any screen, without problems.
Three column pricing tables
This is a neat CSS snippet of a pricing table with 3 columns that you can easily download and add into your websites. Enjoy!
Simple Pricing Tables with Animation
This is a nice CSS snippet of a pricing table that you can use for subscriptions, memberships, etc. It comes with a beautiful animation that will definitely get the user’s attention.
Pricing Table by RowBootstrap
This is another great CSS snippet that is ready to use and to add to your website. This pricing table will look beautiful on your website and it will provide all the necessary information for subscriptions.
The post 20 CSS Snippets for Pricing Tables appeared first on Web Design Blog | Magazine for Designers.
via http://ift.tt/2jN4Wea
No comments:
Post a Comment