Interactive Credit Card UI Animation using HTML CSS and JavaScript

In this post, we'll embark on a creative journey to construct an Interactive credit card UI component using HTML and CSS. This card component simulates a credit card with a front and back view, complete with cardholder details, a card logo, and even a reflective effect. By the end of this guide, you'll have a better understanding of how to create captivating UI components that enhance your web projects.

Must Read: Interactive Quiz Web App using HTML CSS JavaScript Project | With Levels

The provided HTML code structures a comprehensive card component.

<div class="main-container">
    <div id="card-container">
        <div id="card">
            <div id="front">
                <div class="reflection"></div>
                <div class="type">PLATINUM</div>
                <div class="title-text">Bank Name</div>
                <div class="details">
                    <div class="name">Person Name</div>
                    <p id="hidden-number">1111 XXXX XXXX 1452</p>
                </div>
                <button id="show-btn">View Card Details</button>
                <div class="logo">MasterCard</div>
            </div>
            <div id="back">
                <div class="reflection"></div>
                <div id="chip">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="title-text">Bank Name</div>
                <div class="details">
                    <div class="name">Person Name</div>
                    <p id="hidden-number">1111 1223 1223 1452</p>
                    <span id="cvv">CVV: 304</span>
                    <span id="valid-date"> Expiry: 02/30</span>
                </div>
                <button id="hide-btn">Hide Card Details</button>
                <div class="logo">MasterCard</div>
            </div>
        </div>
    </div>
</div>

The front view of the card is represented by the id="front" element. It displays essential information such as the card type, bank name, cardholder's name, a placeholder for the card number (which can be replaced with a real one), and a button labelled "View Card Details" that allows users to switch to the back view. Additionally, you can customize the card logo to match the card provider.

Must Read: Realistic Candle using HTML and CSS only

The back view, accessed by clicking the "View Card Details" button, is represented by the element with the id="back" . It simulates the card's chip, displays the bank name once more for authenticity, showcases the cardholder's name, the card number, CVV code, and the card's expiration date. Users can return to the front view by clicking the "Hide Card Details" button.

To style our credit card component, we have applied these CSS styles, which can be customized to match your desired look and feel.

.main-container {
    min-width: 400px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#card-container {
    width: 350px;
    height: 190px;
    perspective: 1000px;
    border-radius: 10px;
}

#card {
    width: 100%;
    height: 100%;
    color: white;
    transition: 1s;
    position: relative;
    border-radius: 10px;
    perspective: 1000px;
    font-family: calibri;
    transform-style: preserve-3d;
}

#front,
#back {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: 10px;
    backface-visibility: hidden;
    background: linear-gradient(55deg, #0b0b0bfc 45%, rgb(25 25 25) 40%);
}

#back {
    transform: rotateY(180deg);
}

#front::after,
#front::before,
#back::after,
#back::before {
    content: '';
    width: 100%;
    height: 350px;
    position: absolute;
}

#front::before,
#back::before {
    left: -1%;
    transform: rotate(90deg);
    border-radius: 50% 95% 0% 100%;
    background: rgb(255 255 255 / 3%);
}

#front::after,
#back::after {
    height: 100%;
    right: -50%;
    top: -50%;
    border-radius: 100% 0 100% 80%;
    border: 1px solid rgb(239, 239, 239);
}

.reflection {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: 1s;
}

.reflection::before {
    z-index: 0;
    top: 50%;
    content: '';
    left: -50%;
    height: 360px;
    position: absolute;
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(50deg);
    box-shadow: 0px 0px 10px 10px #ffffff;
}

.type {
    top: 10%;
    margin-left: 15px;
    font-weight: bold;
    color: transparent;
    background: linear-gradient(62deg, #ffffff 0%, #000000 100%);
    position: relative;
    background-clip: text;
    -webkit-background-clip: text;
}

.title-text {
    position: absolute;
    right: 5%;
    top: 5%;
}

.details {
    position: relative;
    top: 35%;
    margin-left: 15px;
    font-size: 12px;
}

#hidden-number {
    margin-bottom: 10px;
}

#show-btn,
#hide-btn {
    position: absolute;
    bottom: 10%;
    left: 5%;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    font-family: calibri;
    background: rgb(28, 28, 107);
}

.logo {
    position: absolute;
    font-size: 10px;
    width: 20%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    bottom: 3%;
    right: 0%;
}

.logo::before,
.logo::after {
    content: '';
    position: absolute;
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.logo::before {
    background: rgba(255, 0, 0, 0.525);
    left: 10%
}

.logo::after {
    background: rgba(255, 213, 0, 0.584);
    right: 10%;
}

.flipped {
    transform: rotateY(-180deg);
}

#chip {
    top: 10%;
    position: absolute;
    background: #e0ab89;
    width: 15%;
    height: 18%;
    border-radius: 5px;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#chip span {
    position: absolute;
    background: #e0ab89;
    border: 1px solid black;
}

#chip span:nth-child(1) {
    height: 100%;
    width: 40%;
    border-top: none;
    border-bottom: none;
}

#chip span:nth-child(2) {
    height: 60%;
    width: 40%;
    left: 0;
    border-left: none;
    border-radius: 0 5px 5px 0;
}

#chip span:nth-child(3) {
    height: 60%;
    width: 40%;
    border-right: none;
    border-radius: 5px 0 0 5px;
    right: 0;
}

#chip span:nth-child(4) {
    width: 100%;
    border: none;
    border-bottom: 1px solid black;
}

#chip span:nth-child(5) {
    aspect-ratio: 1/1;
    width: 25%;
    border-radius: 2px;
}

.move {
    transform: translateX(700px);
}

#valid-date {
    margin-left: 15px;
}

Below is the code snippet of the JavaScript code to flip the card component.

flip = () => {
    document.getElementById('card').classList.toggle('flipped')
    document.querySelector('#front .reflection').classList.toggle('move')
    document.querySelector('#back .reflection').classList.toggle('move')
}
document.getElementById('show-btn').addEventListener('click', flip)
document.getElementById('hide-btn').addEventListener('click', flip)

By following this tutorial, you've not only created a visually engaging and interactive credit card UI component but also gained valuable insights into constructing captivating UI elements using HTML and CSS. This component can serve various purposes, from showcasing card designs to enhancing user experience on e-commerce websites.

This component can serve various purposes, from showcasing card designs to enhancing user experience on e-commerce websites. Don't hesitate to expand and customize this foundation by incorporating animations, transitions, or JavaScript interactivity to create an even more dynamic and engaging card component.

Ready to showcase your creativity and enhance your web projects? Share your thoughts, questions, and customization ideas in the comments below as you continue to explore the endless possibilities of web design.

Download