In this post I am going to share Free source code for building A Modern Animated Pricing Table With HTML & CSS.

Modern Animated Pricing Table Using HTML and CSS (Free Source Code)

Byjvcodes

In case you are looking for an engaging way to share your packages with your clients, look no further. Look no further!

In this post I am going to share Free source code for building A Modern Animated Pricing Table With HTML & CSS.

This pricing table is not only beautifully designed but also easy to navigate, which is suitable for any type of website.

GitHub Source: Modern Animated Pricing Table

Features

  • Easy to Customize: Change the colors, fonts and animations instantly and in a visual friendly manner to match the branding requirements.
  • Responsive Design: The table is well designed and can be well viewed on desktops, tab and even one’s mobile phone.
  • Cross-Browser Compatibility: Compatible with Chrome, Firefox, Safari, and Edge, as well as operating systems, MacOS and Windows.
  • Clean Code: The code is clean to read, and attempts have been made in making it simple as its primary goal.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Modern Animated Pricing Table

Follow these steps to design your modern pricing table:

  • Create Project Folder: It is required to create a folder within which all project files will be stored.
  • Create index.html: Pricing table has the following HTML structure in this file.
  • Create style.css: Insert some style and effects to the pricing table in this file.
  • Copy & Paste the Code: Here is a free source code for you to avoid the trouble to write it by your own hand.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Animated Pricing Table</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="section over-hide">
    <div class="container">
        <div class="row full-height justify-content-center">
            <div class="col-12 text-center align-self-center py-5">
                <div class="section text-center py-5 py-md-0">
                      <input class="pricing" type="checkbox" id="pricing" name="pricing"/>
                      <label for="pricing"><span class="block-diff">kayaking<span class="float-right">camping</span></span></label>
                    <div class="card-3d-wrap mx-auto">
                        <div class="card-3d-wrapper">
                            <div class="card-front">
                                <div class="pricing-wrap">
                                    <h4 class="mb-5">Kayaking</h4>
                                    <h2 class="mb-2"><sup>$</sup>49 / 4<sup>hrs</sup></h2>
                                    <p class="mb-4">per person</p>
                                    <p class="mb-1"><i class="uil uil-location-pin-alt size-22"></i></p>
                                    <p class="mb-4">Drina, Serbia</p>
                                    <a href="#0" class="link">Choose Date</a>
                                    <div class="img-wrap img-2">
                                        <img src="https://assets.codepen.io/1462889/sea.png" alt="">
                                    </div>
                                    <div class="img-wrap img-1">
                                        <img src="https://assets.codepen.io/1462889/kayak.png" alt="">
                                    </div>
                                    <div class="img-wrap img-3">
                                        <img src="https://assets.codepen.io/1462889/water.png" alt="">
                                    </div>
                                    <div class="img-wrap img-6">
                                        <img src="https://assets.codepen.io/1462889/Stone.png" alt="">
                                    </div>
                                  </div>
                              </div>
                            <div class="card-back">
                                <div class="pricing-wrap">
                                    <h4 class="mb-5">Camping</h4>
                                    <h2 class="mb-2"><sup>$</sup>39 / 8<sup>hrs</sup></h2>
                                    <p class="mb-4">per person</p>
                                    <p class="mb-1"><i class="uil uil-location-pin-alt size-22"></i></p>
                                    <p class="mb-4">Tara, Serbia</p>
                                    <a href="#0" class="link">Choose Date</a>
                                    <div class="img-wrap img-2">
                                        <img src="https://assets.codepen.io/1462889/grass.png" alt="">
                                    </div>
                                    <div class="img-wrap img-4">
                                        <img src="https://assets.codepen.io/1462889/camp.png" alt="">
                                    </div>
                                    <div class="img-wrap img-5">
                                        <img src="https://assets.codepen.io/1462889/Ivy.png" alt="">
                                    </div>
                                    <div class="img-wrap img-7">
                                        <img src="https://assets.codepen.io/1462889/IvyRock.png" alt="">
                                    </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
    </div>
</div>
</body>
</html>

CSS

Here is the complete code for style.css file to style the pricing table:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

:root{
  font-size: 20px;
}
body{
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.7;
	color: #102770;
	background-color: #ffeba7;
	overflow-x: hidden;
}
a {
	cursor: pointer;
  transition: all 200ms linear;
}
a:hover {
	text-decoration: none;
}
.link {
  color: #c4c3ca;
}
.link:hover {
  color: #ffeba7;
}
.over-hide {
  overflow: hidden;
}
.size-22{
  font-size: 22px;
}
.section{
  position: relative;
  width: 100%;
  z-index: 1;
  display: block;
}
.full-height{
  min-height: 100vh;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.pricing:checked + label,
.pricing:not(:checked) + label{
  position: relative;
  display: block;
  text-align: justify;
  width: 230px;
  height: 44px;
  border-radius: 4px;
  padding: 0;
  margin: 50px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 40px;
  padding: 0 25px;
  padding-right: 5px;
  overflow: hidden;
  color: #fff;
  text-align: left;
  margin: 90px auto; /* Centers the card horizontally */
}
.pricing:checked + label:before,
.pricing:not(:checked) + label:before{
  position: absolute;
  content: '';
  z-index: -2;
  background-color: #102770;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
}
.float-right{
    float: right;
    padding-right: 20px;
}

.pricing:checked + label:after,
.pricing:not(:checked) + label:after{
  position: absolute;
  content: '';
  z-index: -1;
  background-color: #ffeba7;
  width: 128px;
  height: 40px;
  display: block;
  top: 2px;
  left: 2px;
  border-radius: 2px;
  transition: left 300ms linear;
  
}
.pricing:checked + label:after {
  left: 130px;
}
.block-diff {
  display: block;
  mix-blend-mode: difference;
  
}

.card-3d-wrap {
  position: relative;
  width: 340px;
  max-width: calc(100% - 20px);
  height: 510px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 1000px;
  margin: 90px auto;
  
}
.card-3d-wrapper {
  width: 100%;
  height: 100%;
  position:absolute;    
  top: 0;
  left: 0;  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 700ms 400ms ease-out; 
  
}
.card-front, .card-back {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  position: absolute;
  border-radius: 6px;
  left: 0;
  top: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 12px 35px 0 rgba(16, 39, 112,.07);
}
.card-back {
  transform: rotateY(180deg);
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper {
  transform: rotateY(180deg);
  transition: transform 700ms 400ms ease-out; 
}
.pricing-wrap{
  position: relative;
  padding-top: 160px;
  width: 100%;
  display: block;
  z-index: 1;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pricing-wrap h4{
  position: relative;
  width: 100%;
  display: block;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 22px;
  line-height: 1.7;
  color: #102770;
  transform: translate3d(0, 0, 35px) perspective(100px);
}
.pricing-wrap h4:before{
  position: absolute;
  content: '';
  z-index: -1;
  background: linear-gradient(217deg, #448ad5, #b8eaf9);
  width: 70px;
  height: 70px;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 20px 0 rgba(16, 39, 112,.3);
  animation: border-transform 6s linear infinite;
}
.card-back .pricing-wrap h4:before{
  background: linear-gradient(217deg, #648946, #a3c984);
}
@keyframes border-transform{
  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; }
}
.pricing-wrap h2{
  position: relative;
  width: 100%;
  display: block;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 36px;
  line-height: 1.1;
  color: #102770;
  transform: translate3d(0, 0, 30px) perspective(100px);
}
.pricing-wrap h2 sup{
  font-size: 20px;
}
.pricing-wrap p{
  position: relative;
  width: 100%;
  display: block;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 1px;
  color: #102770;
  transform: translate3d(0, 0, 30px) perspective(100px);
}
.card-back h2,
.card-back p,
.card-back h4{
  color: #0c1c00;
}
.link {
  position: relative;
  padding: 10px 20px;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  color: #ffeba7;
  background-color: #102770;
  transition: all 200ms linear;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  margin-left: 100px;
  transform: translate3d(0, 0, 30px) perspective(100px);
  
}
.link:hover {
  color: #102770;
  background-color: #ffeba7;
}
.card-back .link{
  background-color: #0c1c00;
}
.card-back .link:hover{
  color: #0c1c00;
  background-color: #ffeba7;
}
.img-wrap img{
  width: 100%;
  height: auto;
  display: block;
}
.img-1{
  position: absolute;
  display: block;
  left: -160px;
  top: -50px;
  z-index: 5;
  width: calc(80% + 160px);
  transform: translate3d(0, 0, 45px) perspective(100px);
  opacity: 1;
  pointer-events: auto;
  transition: transform 400ms 1200ms ease, opacity 400ms 1200ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-1 {
  opacity: 0;
  transform: translate3d(-50px, 25px, 45px) perspective(100px);
  pointer-events: none;
  transition: transform 400ms ease, opacity 200ms 150ms ease;
}
.img-2 {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  overflow: hidden;
  width: 100%;
  transform: translate3d(0, 0, 15px) perspective(100px);
}
.img-3{
  position: absolute;
  display: block;
  right: -20px;
  top: -40px;
  z-index: 5;
  width: calc(60% + 20px);
  transform: translate3d(0, 0, 55px) perspective(100px) scale(1);
  opacity: 1;
  pointer-events: auto;
  transition: transform 300ms 1300ms ease, opacity 200ms 1300ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-3 {
  opacity: 0;
  transform: translate3d(-50px, 5px, 55px) perspective(100px) scale(0.4);
  pointer-events: none;
  transition: transform 400ms ease, opacity 200ms 150ms ease;
}
.img-6{
  position: absolute;
  display: block;
  right: -20px;
  bottom: -55px;
  z-index: 5;
  width: calc(20% + 30px);
  transform: translate3d(0, 0, 25px) perspective(100px) scale(1);
  opacity: 1;
  pointer-events: auto;
  transition: transform 300ms 1300ms ease, opacity 200ms 1300ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-6 {
  opacity: 0;
  transform: translate3d(0, 0, 25px) perspective(100px) scale(0.4);
  pointer-events: none;
  transition: transform 400ms ease, opacity 200ms 150ms ease;
}

.img-4{
  position: absolute;
  display: block;
  left: -60px;
  top: -60px;
  z-index: 5;
  width: calc(65% + 60px);
  transform: translate3d(0, 0, 45px) perspective(100px) scale(0.5);
  opacity: 0;
  pointer-events: none;
  transition: transform 400ms ease, opacity 200ms 150ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-4 {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 45px) perspective(100px) scale(1);
  transition: transform 400ms 1200ms ease, opacity 300ms 1200ms ease;
}
.img-5{
  position: absolute;
  display: block;
  right: -70px;
  top: -50px;
  z-index: 6;
  width: calc(60% + 70px);
  transform: translate3d(0, 0, 35px) perspective(100px) scale(0.5) rotate(0deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 400ms 100ms ease, opacity 200ms 250ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-5 {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 35px) perspective(100px) scale(1) rotate(10deg);
  transition: transform 400ms 1300ms ease, opacity 300ms 1300ms ease;
}
.img-7{
  position: absolute;
  display: block;
  right: -30px;
  bottom: -65px;
  z-index: 6;
  width: calc(25% + 30px);
  transform: translate3d(0, 0, 35px) perspective(100px) scale(0.5);
  opacity: 0;
  pointer-events: none;
  transition: transform 400ms 100ms ease, opacity 200ms 250ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-7 {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 35px) perspective(100px) scale(1);
  transition: transform 400ms 1300ms ease, opacity 300ms 1300ms ease;
}

.logo {
	position: fixed;
	top: 30px;
	right: 30px;
	display: block;
	z-index: 100;
	transition: all 250ms linear;
}
.logo img {
	height: 26px;
	width: auto;
	display: block;
}

Download Source Code

Click the button below to download the source code for the Modern Animated Pricing Table. This source code is released under free license and it is not protected by copyright so feel free to use it in personal or commercial projects.

Download Source Code

Conclusion

This Modern Animated Pricing Table Using HTML and CSS is a perfect option to make the website look professional and appealing. This makes it to stand out and it has great animation effects which make the use of this product to be unique.

You can use this code in your site freely but please link back to this site JV Source Codes for a backlink. If you have any questions on the topic or come across any problem let me know in the comment section below and I will assist.

So make sure to hit that subscribe button for more helpful coding tips and tricks.

Download JV Source Codes

Similar Posts

Navigation Bar With Page Scroll To Every Section
| | |

Navigation Bar With Page Scroll To Every Section in HTML and CSS

Do you want a clean and stylish website with a easy navigation between pages? A cool scroll navigation bar will help you make a great experience for your site. In this article, you’ll find out how to make a Navigation Bar with Page Scroll To Every Section completely free of charge. Here is a wonderful…

Navigation Bar with Indicator
| | |

Navigation Bar with Indicator in HTML, CSS and JavaScript

Navigation bar with indicator is one of the user friendly ways of presenting menu options on the website that improves general appearance of the navigation. It includes a bar that changes its position when a user navigates to various parts of the website by clicking on the corresponding menu item. In this tutorial, I am…

How to Create a Simple Sidebar Menu in HTML CSS JavaScript
| | |

Simple Sidebar Menu in HTML, CSS and JavaScript

Building a simple sidebar menu is an excellent idea that will allow adding valuable features and stunning looks to your website. A sidebar menu is useful for clients to find their way to different items without feeling that they are being given too many choices, thus, creating simplicity and order. Today, I’m going to share…

Leave a Reply

Your email address will not be published. Required fields are marked *