Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Credit Card UI Design in HTML & CSS
To design a Credit Card UI in HTML & CSS, we create a responsive form that mimics the appearance and layout of a real credit card. This involves structuring HTML elements for card details and styling them with CSS to create an attractive, user-friendly interface.
Steps to Create Credit Card UI Design
To design a credit card UI in HTML and CSS, we will create the following structure ?
- HTML structure with form elements for card details
- CSS styling for visual design and responsive layout
- Animations and hover effects for better user experience
HTML Structure for Credit Card UI
The HTML structure includes form elements for card number, cardholder name, expiration date, and CVV. We use semantic HTML with proper labeling for accessibility ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credit Card UI</title>
<style>
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1e3a8a, #2563eb);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
width: 100%;
max-width: 800px;
}
.title {
text-align: center;
font-size: 28px;
font-weight: bold;
margin-bottom: 30px;
animation: titleFadeIn 1.5s ease-in-out;
}
/* Title Animation */
@keyframes titleFadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
/* Desktop Layout */
@media (min-width: 768px) {
.form-wrapper {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.card-box, .details-box {
width: 48%;
}
}
.card-box, .details-box {
background: rgba(46, 123, 245, 0.9);
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
animation: fadeIn 1.5s ease-in-out;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-box {
position: relative;
min-height: 280px;
}
.paying {
font-size: 18px;
margin-bottom: 25px;
color: #ffd700;
font-weight: bold;
}
.details-box {
animation: slideDown 1.5s ease-in-out;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 280px;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.label-text {
display: block;
font-size: 14px;
margin-bottom: 8px;
font-weight: bold;
letter-spacing: 0.5px;
}
input {
width: 100%;
padding: 12px 15px;
margin-bottom: 20px;
border: none;
border-radius: 8px;
font-size: 16px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
input:focus {
outline: none;
background: rgba(255, 255, 255, 0.2);
border-color: #ffd700;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
/* Expiration Inputs */
.expiration {
margin-bottom: 20px;
}
.expiration-inputs {
display: flex;
gap: 15px;
}
.expiration-inputs input {
width: calc(50% - 7.5px);
text-align: center;
}
/* Submit Button */
.submit-btn {
width: 100%;
padding: 15px;
background: linear-gradient(45deg, #4caf50, #45a049);
color: #fff;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.submit-btn:hover {
background: linear-gradient(45deg, #45a049, #3d8b40);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
/* Card Chip Effect */
.card-chip {
width: 45px;
height: 35px;
background: linear-gradient(45deg, #ffd700, #ffed4e);
border-radius: 6px;
margin-bottom: 20px;
position: relative;
}
.card-chip::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 60%;
background: linear-gradient(45deg, #b8860b, #daa520);
border-radius: 3px;
transform: translate(-50%, -50%);
}
/* Responsive Design */
@media (max-width: 767px) {
.card-box, .details-box {
width: 100%;
}
.title {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">Credit Card UI Design</h1>
<div class="form-wrapper">
<div class="card-box">
<div class="card-chip"></div>
<h2 class="paying">PAYING: $99.00</h2>
<label for="cnumber" class="label-text">CARD NUMBER</label>
<input type="text" id="cnumber" placeholder="1234 5678 9101 1122" maxlength="19" />
<label for="cholder" class="label-text">CARD HOLDER</label>
<input type="text" id="cholder" placeholder="JOHN DOE" />
<div class="expiration">
<label class="label-text">EXPIRATION DATE</label>
<div class="expiration-inputs">
<input type="text" id="mm" placeholder="MM" maxlength="2" />
<input type="text" id="yy" placeholder="YY" maxlength="2" />
</div>
</div>
</div>
<div class="details-box">
<div>
<label for="cvv" class="label-text">CVC/CVV</label>
<input type="password" id="cvv" placeholder="123" maxlength="4" />
</div>
<button class="submit-btn">Process Payment</button>
</div>
</div>
</div>
</body>
</html>
A modern credit card UI interface appears with a blue gradient background. The design features two main sections: a card details form on the left with input fields for card number, holder name, and expiration date, and a payment section on the right with CVV input and a green "Process Payment" button. The interface includes smooth animations, a golden card chip effect, and hover effects on interactive elements.
Key Features of the Credit Card UI
- Responsive Design: Works seamlessly on desktop and mobile devices
- Smooth Animations: Fade-in and slide effects for better user experience
- Visual Card Chip: Realistic card chip element using CSS gradients
- Interactive Elements: Hover effects on buttons and focus states on inputs
- Modern Styling: Glass morphism effect with backdrop blur and transparency
Conclusion
This credit card UI design demonstrates how to create an attractive, responsive payment interface using HTML and CSS. The design incorporates modern UI trends like glass morphism, smooth animations, and intuitive layout to provide an excellent user experience for payment forms.
Updated on: 2026-03-15T18:27:13+05:30
402 Views
Advertisements