Build a Modern Credit Card Component using HTML CSS JS
Credit card components are a crucial part of many web applications, especially those that handle payments and user transactions. This tutorial will guide you through creating a stylish and interactive credit card component using HTML, CSS and JavaScript. By the end of this guide, you’ll have a visually appealing credit card interface that can be flipped to reveal the back side, complete with CVV and other details.
Also Read: Image folding Effect using HTML and CSS
In this post, we build a sleek and functional credit card component that provides a modern design and smooth flipping animation. Let’s break down the structure, styling and functionality used in this example and how you can customize it for your own needs.
HTML Structure
The HTML markup sets up a basic structure for the credit card component. We use a container div (<div class="card-wrapper">) to hold the credit card and manage the 3D perspective. The key elements include:
<div class="card-wrapper">
<div class="card">
<div class="front">
<div class="bg"></div>
<p>CREDIT CARD</p>
<div class="brand"></div>
<div class="chip">
<svg viewBox="0 0 200 140">
<rect x="0" y="0" width="200" height="140" fill="#e0ab89" rx="20" ry="20" />
<path d="M60,0 100,30 140,0 M100,30 V45 M70,45 H130 V95 H70 V45 M100,95 V110 M60,140 100,110 140,140 M130,45 145,35 H200 M130,70 H200 M130,95 145,105 H200 M70,45 55,35 H0 M70,70 H0 M70,95 60,105 H0" fill="none" stroke="#121212" stroke-width="2"></path>
</svg>
</div>
<div class="contactless-icon"></div>
<p class="card-number">6200 9200 2300 4543</p>
<button class="show-cvv">Show CVV</button>
<div class="card-validity"><span class="validity-text">VALID THRU</span> <span class="valid-date">05/32</span>
</div>
<p class="person-name">JOHN DOE</p>
<div class="upi-icon"></div>
</div>
<div class="back">
<div class="bg"></div>
<div class="text">
<span>NON-TRANSFERABLE</span>
<span>DIGITAL USE ONLY</span>
</div>
<div class="mag-stripe"></div>
<div class="sign-n-cvv">
<span class="signature"></span>
<span class="cvv">201</span>
</div>
<p class="dummy-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis fuga nobis obcaecati
dolorem qui nemo tempora tempore sequi itaque! Eos, optio doloribus illo fugiat cum neque molestiae eligendi
libero dolor quas labore minus? Delectus velit dolor libero suscipit provident corporis dolorum quibusdam,
praesentium beatae cupiditate harum consequatur a dignissimos necessitatibus!</p>
<button class="hide-cvv">Hide CVV</button>
<div class="brand"></div>
<div class="contact">
<span>e-mail: contactcentre@sbi.co.in</span>
<span>Toll Free: 1800 11 1109, 1800 11 2211</span>
</div>
</div>
</div>
</div>- Card Wrapper and Card: The outer container (<div class="card-wrapper">) sets up the perspective for 3D transformations and the inner container (<div class="card">) represents the credit card, which contains the front and back faces.
- Front and Back Faces: Two divs (<div class="front"> and <div class="back">) represent the front and back of the credit card. Each face contains various elements such as the card brand, chip, contactless icon, card number, CVV button, validity date, cardholder's name and additional text.
This structure allows us to manage the card's visual layout and flipping functionality effectively.
CSS Styling
The CSS styles focus on creating an attractive and functional credit card component.
@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card-wrapper {
width: 410px;
height: 230px;
min-width: 410px;
perspective: 1000px;
font-family: 'Baloo Bhai 2';
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
color: rgb(245, 245, 245);
transform-style: preserve-3d;
}
.front,
.back {
display: grid;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 10px;
backface-visibility: hidden;
}
.front {
gap: 10px;
line-height: 1;
align-items: center;
padding: 10px 15px 10px;
justify-content: space-between;
grid-template-rows: repeat(2, auto) 1fr repeat(2, auto);
grid-template-areas: "text brand" "chip contactless" "number number" "btn valid" "name type";
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
z-index: -1;
background: url(https://i.ibb.co/6mYj9C9/bg.jpg) center / cover no-repeat;
}
.brand {
width: 60px;
height: 25px;
justify-self: end;
margin-bottom: 10px;
background: url(https://i.ibb.co/9pWbpK5/sbi.png) center / contain no-repeat;
}
.chip {
width: 50px;
grid-area: chip;
margin-left: 15px;
}
.contactless-icon {
width: 50px;
height: 35px;
justify-self: end;
margin-right: 15px;
grid-area: contactless;
background: url(https://i.ibb.co/rwP5Qb5/contactless.png) center / contain no-repeat;
}
.card-number {
font-size: 25px;
grid-area: number;
color: #e8e8e8;
margin-left: 15px;
letter-spacing: 3px;
filter: drop-shadow(0px 0px 3px black);
}
.show-cvv,
.hide-cvv {
border: none;
grid-area: btn;
color: white;
line-height: 2;
cursor: pointer;
font-size: 14px;
padding: 0px 15px;
border-radius: 5px;
width: max-content;
font-family: "Baloo Bhai 2";
backdrop-filter: blur(10px);
background-color: #0000006b;
}
.card-validity {
grid-area: valid;
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
}
.validity-text {
font-size: 8px;
width: min-content;
}
.valid-date {
font-size: 20px;
letter-spacing: 4px;
}
.person-name {
grid-area: name;
letter-spacing: 2px;
padding: 0 15px;
}
.upi-icon {
width: 100px;
height: 30px;
grid-area: type;
justify-self: flex-end;
background: url(https://i.ibb.co/vh20Mhn/RuPay.png) center / contain no-repeat;
}
.back {
background-color: #050505;
transform: rotateY(180deg);
grid-template-rows: repeat(4, auto)1fr auto;
grid-template-areas: "text text" "stripe stripe" "sc sc" "btn dummy" "brand dummy" "contact contact";
}
.back .bg {
opacity: 0.5;
}
.show-backside {
transform: rotateY(-180deg);
}
.text {
display: flex;
padding: 0 12px;
font-size: 10px;
grid-area: text;
color: #ffffffba;
justify-content: space-between;
}
.mag-stripe {
width: 100%;
height: 50px;
grid-area: stripe;
background-color: #000;
}
.sign-n-cvv {
display: flex;
width: 100%;
grid-area: sc;
height: 40px;
margin: 10px 0;
}
.signature {
width: 100%;
background-image: repeating-linear-gradient(320deg, #e7e7e7 -2px, #e7e7e7 3px, #cccccc 0px, #cccccc 8px);
}
.cvv {
height: 40px;
color: black;
padding: 10px 12px;
font-style: italic;
letter-spacing: 2px;
background: white;
}
.dummy-text {
grid-area: dummy;
font-size: 8px;
color: #ffffff69;
}
.hide-cvv {
margin: 0 10px;
background-color: #0000008f;
border: 1px solid #ffffff1f;
}
.back .brand {
margin: 10px 15px 0;
justify-self: self-start;
}
.contact {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #ffffff91;
padding: 2px 10px;
grid-area: contact;
letter-spacing: 1.5px;
}- The card-wrapper class sets up the perspective for the 3D effect and the card class applies the 3D transformations and transitions.
- Both faces are styled with grid layout to organize the content. The front class includes areas for the card number, chip, contactless icon and other details, while the back class includes the magnetic stripe, CVV, signature area and additional text.
- The bg class applies a background image to both faces, with adjustments for opacity and position.
- Buttons are styled with background colors, padding and hover effects to enhance usability. The show-backside class rotates the card to show the back face when triggered by JavaScript.
These styles ensure the credit card component is visually appealing, easy to use and responsive to different screen sizes.
JavaScript Functionality
The JavaScript code handles the interactive aspects of the credit card component. It includes:
document.querySelectorAll('.show-cvv, .hide-cvv').forEach(elem =>
elem.addEventListener('click', () => document.querySelector('.card').classList.toggle('show-backside')))- Event listeners on the CVV buttons handle the toggling of the card's flipping animation. When clicked, the card rotates to reveal the back face.
- The show-backside class is toggled on the card element to apply the rotation transformation.
This script enhances the user experience by providing intuitive and smooth transitions between the front and back faces of the card.
Creating a stylish credit card component is an excellent way to improve the user experience on your website, especially for payment and transaction-related features. This tutorial provided a comprehensive guide on building a modern, responsive and interactive credit card component using HTML, CSS and JavaScript.
You now have a template that combines aesthetic appeal with practical functionality. The clean design, intuitive layout and smooth transitions make this credit card component an excellent addition to any web project. You can easily customize the styles and interactions to fit your specific needs, whether you’re building a personal portfolio, a business site, or an application with payment capabilities.
Also Read: Build a Collapsible Sidebar Menu using JavaScript
By integrating this credit card component, you can offer your users a seamless and engaging way to interact with their payment details, helping to enhance their overall experience on your site.
