• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Animated Pricing Card Design using HTML & CSS
A pricing card is a design element on a commercial website to display the various pricing plans, subscriptions, or price comparisons.
In our design [Pure CSS Pricing Card], there is a single card as you can see in the preview image above. In this card, there is a total of 3 packages, and you can view each package with the help of a slider tab which is placed to the top. When you click on the particular tab, the particular package will appear with a sliding animation, making this card pretty cool.
If you are confusing about how this card slide to show it other packages or how it is created using only HTML & CSS then you can watch a video tutorial of this Pricing Card with Sliding Animation.
Animated Pricing Card Design [Source Codes]
To create this Animated Pricing Card, follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Pricing Cards | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<input type="radio" name="slider" id="tab-1">
<input type="radio" name="slider" id="tab-2" checked>
<input type="radio" name="slider" id="tab-3">
<header>
<label for="tab-1" class="tab-1">Basic</label>
<label for="tab-2" class="tab-2">Standard</label>
<label for="tab-3" class="tab-3">Team</label>
<div class="slider"></div>
</header>
<div class="card-area">
<div class="cards">
<div class="row row-1">
<div class="price-details">
<span class="price">19</span>
<p>For beginner use</p>
</div>
<ul class="features">
<li><i class="fas fa-check"></i><span>100 GB Premium Bandwidth</span></li>
<li><i class="fas fa-check"></i><span>FREE 50+ Installation Scripts WordPress Supported</span></li>
<li><i class="fas fa-check"></i><span>One FREE Domain Registration .com and .np extensions only</span></li>
<li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
</ul>
</div>
<div class="row">
<div class="price-details">
<span class="price">99</span>
<p>For professional use</p>
</div>
<ul class="features">
<li><i class="fas fa-check"></i><span>Unlimited GB Premium Bandwidth</span></li>
<li><i class="fas fa-check"></i><span>FREE 200+ Installation Scripts WordPress Supported</span></li>
<li><i class="fas fa-check"></i><span>Five FREE Domain Registration .com and .np extensions only</span></li>
<li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
</ul>
</div>
<div class="row">
<div class="price-details">
<span class="price">49</span>
<p>For team collaboration</p>
</div>
<ul class="features">
<li><i class="fas fa-check"></i><span>200 GB Premium Bandwidth</span></li>
<li><i class="fas fa-check"></i><span>FREE 100+ Installation Scripts WordPress Supported</span></li>
<li><i class="fas fa-check"></i><span>Two FREE Domain Registration .com and .np extensions only</span></li>
<li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
</ul>
</div>
</div>
</div>
<button>Choose plan</button>
</div>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - youtube.com/codingnepal --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pure CSS Pricing Cards | CodingNepal</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <div class="wrapper"> <input type="radio" name="slider" id="tab-1"> <input type="radio" name="slider" id="tab-2" checked> <input type="radio" name="slider" id="tab-3"> <header> <label for="tab-1" class="tab-1">Basic</label> <label for="tab-2" class="tab-2">Standard</label> <label for="tab-3" class="tab-3">Team</label> <div class="slider"></div> </header> <div class="card-area"> <div class="cards"> <div class="row row-1"> <div class="price-details"> <span class="price">19</span> <p>For beginner use</p> </div> <ul class="features"> <li><i class="fas fa-check"></i><span>100 GB Premium Bandwidth</span></li> <li><i class="fas fa-check"></i><span>FREE 50+ Installation Scripts WordPress Supported</span></li> <li><i class="fas fa-check"></i><span>One FREE Domain Registration .com and .np extensions only</span></li> <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li> </ul> </div> <div class="row"> <div class="price-details"> <span class="price">99</span> <p>For professional use</p> </div> <ul class="features"> <li><i class="fas fa-check"></i><span>Unlimited GB Premium Bandwidth</span></li> <li><i class="fas fa-check"></i><span>FREE 200+ Installation Scripts WordPress Supported</span></li> <li><i class="fas fa-check"></i><span>Five FREE Domain Registration .com and .np extensions only</span></li> <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li> </ul> </div> <div class="row"> <div class="price-details"> <span class="price">49</span> <p>For team collaboration</p> </div> <ul class="features"> <li><i class="fas fa-check"></i><span>200 GB Premium Bandwidth</span></li> <li><i class="fas fa-check"></i><span>FREE 100+ Installation Scripts WordPress Supported</span></li> <li><i class="fas fa-check"></i><span>Two FREE Domain Registration .com and .np extensions only</span></li> <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li> </ul> </div> </div> </div> <button>Choose plan</button> </div> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#D5A3FF 0%, #77A5F8 100%);
}
.wrapper{
width: 400px;
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
}
.wrapper header{
height: 55px;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 30px;
position: relative;
}
header label{
height: 100%;
z-index: 2;
width: 30%;
display: flex;
cursor: pointer;
font-size: 18px;
position: relative;
align-items: center;
justify-content: center;
transition: color 0.3s ease;
}
#tab-1:checked ~ header .tab-1,
#tab-2:checked ~ header .tab-2,
#tab-3:checked ~ header .tab-3{
color: #fff;
}
header label:nth-child(2){
width: 40%;
}
header .slider{
position: absolute;
height: 85%;
border-radius: inherit;
background: linear-gradient(145deg, #D5A3FF 0%, #77A5F8 100%);
transition: all 0.3s ease;
}
#tab-1:checked ~ header .slider{
left: 0%;
width: 90px;
transform: translateX(5%);
}
#tab-2:checked ~ header .slider{
left: 50%;
width: 120px;
transform: translateX(-50%);
}
#tab-3:checked ~ header .slider{
left: 100%;
width: 95px;
transform: translateX(-105%);
}
.wrapper input[type="radio"]{
display: none;
}
.card-area{
overflow: hidden;
}
.card-area .cards{
display: flex;
width: 300%;
}
.cards .row{
width: 33.4%;
}
.cards .row-1{
transition: all 0.3s ease;
}
#tab-1:checked ~ .card-area .cards .row-1{
margin-left: 0%;
}
#tab-2:checked ~ .card-area .cards .row-1{
margin-left: -33.4%;
}
#tab-3:checked ~ .card-area .cards .row-1{
margin-left: -66.8%;
}
.row .price-details{
margin: 20px 0;
text-align: center;
padding-bottom: 25px;
border-bottom: 1px solid #e6e6e6;
}
.price-details .price{
font-size: 65px;
font-weight: 600;
position: relative;
font-family: 'Noto Sans', sans-serif;
}
.price-details .price::before,
.price-details .price::after{
position: absolute;
font-weight: 400;
font-family: "Poppins", sans-serif;
}
.price-details .price::before{
content: "$";
left: -13px;
top: 17px;
font-size: 20px;
}
.price-details .price::after{
content: "/mon";
right: -33px;
bottom: 17px;
font-size: 13px;
}
.price-details p{
font-size: 18px;
margin-top: 5px;
}
.row .features li{
display: flex;
font-size: 15px;
list-style: none;
margin-bottom: 10px;
align-items: center;
}
.features li i{
background: linear-gradient(#D5A3FF 0%, #77A5F8 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.features li span{
margin-left: 10px;
}
.wrapper button{
width: 100%;
border-radius: 25px;
border: none;
outline: none;
height: 50px;
font-size: 18px;
color: #fff;
cursor: pointer;
margin-top: 20px;
background: linear-gradient(145deg, #D5A3FF 0%, #77A5F8 100%);
transition: transform 0.3s ease;
}
.wrapper button:hover{
transform: scale(0.98);
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(#D5A3FF 0%, #77A5F8 100%); } .wrapper{ width: 400px; background: #fff; border-radius: 16px; padding: 30px; box-shadow: 10px 10px 15px rgba(0,0,0,0.05); } .wrapper header{ height: 55px; display: flex; align-items: center; border: 1px solid #ccc; border-radius: 30px; position: relative; } header label{ height: 100%; z-index: 2; width: 30%; display: flex; cursor: pointer; font-size: 18px; position: relative; align-items: center; justify-content: center; transition: color 0.3s ease; } #tab-1:checked ~ header .tab-1, #tab-2:checked ~ header .tab-2, #tab-3:checked ~ header .tab-3{ color: #fff; } header label:nth-child(2){ width: 40%; } header .slider{ position: absolute; height: 85%; border-radius: inherit; background: linear-gradient(145deg, #D5A3FF 0%, #77A5F8 100%); transition: all 0.3s ease; } #tab-1:checked ~ header .slider{ left: 0%; width: 90px; transform: translateX(5%); } #tab-2:checked ~ header .slider{ left: 50%; width: 120px; transform: translateX(-50%); } #tab-3:checked ~ header .slider{ left: 100%; width: 95px; transform: translateX(-105%); } .wrapper input[type="radio"]{ display: none; } .card-area{ overflow: hidden; } .card-area .cards{ display: flex; width: 300%; } .cards .row{ width: 33.4%; } .cards .row-1{ transition: all 0.3s ease; } #tab-1:checked ~ .card-area .cards .row-1{ margin-left: 0%; } #tab-2:checked ~ .card-area .cards .row-1{ margin-left: -33.4%; } #tab-3:checked ~ .card-area .cards .row-1{ margin-left: -66.8%; } .row .price-details{ margin: 20px 0; text-align: center; padding-bottom: 25px; border-bottom: 1px solid #e6e6e6; } .price-details .price{ font-size: 65px; font-weight: 600; position: relative; font-family: 'Noto Sans', sans-serif; } .price-details .price::before, .price-details .price::after{ position: absolute; font-weight: 400; font-family: "Poppins", sans-serif; } .price-details .price::before{ content: "$"; left: -13px; top: 17px; font-size: 20px; } .price-details .price::after{ content: "/mon"; right: -33px; bottom: 17px; font-size: 13px; } .price-details p{ font-size: 18px; margin-top: 5px; } .row .features li{ display: flex; font-size: 15px; list-style: none; margin-bottom: 10px; align-items: center; } .features li i{ background: linear-gradient(#D5A3FF 0%, #77A5F8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .features li span{ margin-left: 10px; } .wrapper button{ width: 100%; border-radius: 25px; border: none; outline: none; height: 50px; font-size: 18px; color: #fff; cursor: pointer; margin-top: 20px; background: linear-gradient(145deg, #D5A3FF 0%, #77A5F8 100%); transition: transform 0.3s ease; } .wrapper button:hover{ transform: scale(0.98); }
That’s all, now you’ve successfully created a Pure CSS Pricing Card Design. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}