Learn how to create your own credit card UI using HTML, CSS, and JavaScript with this step-by-step tutorial. No prior experience required.
Table of Contents
Creating a credit card using HTML, CSS, and JavaScript may seem like a daunting task, but with the right guidance, it can be a fun and educational project. This tutorial will guide you through the process of creating a credit card UI with step-by-step instructions and explanations. If you are a computer geek and have some free time on your hands, you can now make your own credit card! This article covers the basics of how to design and create your own HTML, CSS, and JavaScript-powered credit card.
Let's start making an amazing credit card form using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our credit card.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our credit card. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our credit card an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
font-family: "Open Sans", sans-serif;
}
body {
background: linear-gradient(50deg, #f3c680, #a1e3e2);
}
/*--------------------
Buttons
--------------------*/
.btn {
display: block;
background: #bded7d;
color: white;
text-decoration: none;
margin: 20px 0;
padding: 15px 15px;
border-radius: 5px;
position: relative;
}
.btn::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.2s ease-in-out;
box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.btn:hover::after {
background: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
/*--------------------
Form
--------------------*/
.form fieldset {
border: none;
padding: 0;
padding: 10px 0;
position: relative;
clear: both;
}
.form fieldset.fieldset-expiration {
float: left;
width: 60%;
}
.form fieldset.fieldset-expiration .select {
width: 84px;
margin-right: 12px;
float: left;
}
.form fieldset.fieldset-ccv {
clear: none;
float: right;
width: 86px;
}
.form fieldset label {
display: block;
text-transform: uppercase;
font-size: 11px;
color: rgba(0, 0, 0, 0.6);
margin-bottom: 5px;
font-weight: bold;
font-family: Inconsolata;
}
.form fieldset input,
.form fieldset .select {
width: 100%;
height: 38px;
color: #333333;
padding: 10px;
border-radius: 5px;
font-size: 15px;
outline: none !important;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}
.form fieldset input.input-cart-number,
.form fieldset .select.input-cart-number {
width: 82px;
display: inline-block;
margin-right: 8px;
}
.form fieldset input.input-cart-number:last-child,
.form fieldset .select.input-cart-number:last-child {
margin-right: 0;
}
.form fieldset .select {
position: relative;
}
.form fieldset .select::after {
content: "";
border-top: 8px solid #222;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
z-index: 2;
top: 14px;
right: 10px;
pointer-events: none;
}
.form fieldset .select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
padding: 0;
border: none;
width: 100%;
outline: none !important;
top: 6px;
left: 6px;
background: none;
}
.form fieldset .select select :-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.form button {
width: 100%;
outline: none !important;
background: linear-gradient(180deg, #49a09b, #3d8291);
text-transform: uppercase;
font-weight: bold;
border: none;
box-shadow: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin-top: 90px;
}
.form button .fa {
margin-right: 6px;
}
/*--------------------
Checkout
--------------------*/
.checkout {
margin: 150px auto 30px;
position: relative;
width: 460px;
background: white;
border-radius: 15px;
padding: 160px 45px 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/*--------------------
Credit Card
--------------------*/
.credit-card-box {
perspective: 1000;
width: 400px;
height: 280px;
position: absolute;
top: -112px;
left: 50%;
transform: translateX(-50%);
}
.credit-card-box:hover .flip, .credit-card-box.hover .flip {
transform: rotateY(180deg);
}
.credit-card-box .front,
.credit-card-box .back {
width: 400px;
height: 250px;
border-radius: 15px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: linear-gradient(135deg, #bd6772, #53223f);
position: absolute;
color: #fff;
font-family: Inconsolata;
top: 0;
left: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.credit-card-box .front::before,
.credit-card-box .back::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("http://cdn.flaticon.com/svg/44/44386.svg") no-repeat center;
background-size: cover;
opacity: 0.05;
}
.credit-card-box .flip {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.credit-card-box .logo {
position: absolute;
top: 9px;
right: 20px;
width: 60px;
}
.credit-card-box .logo svg {
width: 100%;
height: auto;
fill: #fff;
}
.credit-card-box .front {
z-index: 2;
transform: rotateY(0deg);
}
.credit-card-box .back {
transform: rotateY(180deg);
}
.credit-card-box .back .logo {
top: 185px;
}
.credit-card-box .chip {
position: absolute;
width: 60px;
height: 45px;
top: 20px;
left: 20px;
background: linear-gradient(135deg, #ddccf0 0%, #d1e9f5 44%, #f8ece7 100%);
border-radius: 8px;
}
.credit-card-box .chip::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 4px solid rgba(128, 128, 128, 0.1);
width: 80%;
height: 70%;
border-radius: 5px;
}
.credit-card-box .strip {
background: linear-gradient(135deg, #404040, #1a1a1a);
position: absolute;
width: 100%;
height: 50px;
top: 30px;
left: 0;
}
.credit-card-box .number {
position: absolute;
margin: 0 auto;
top: 103px;
left: 19px;
font-size: 38px;
}
.credit-card-box label {
font-size: 10px;
letter-spacing: 1px;
text-shadow: none;
text-transform: uppercase;
font-weight: normal;
opacity: 0.5;
display: block;
margin-bottom: 3px;
}
.credit-card-box .card-holder,
.credit-card-box .card-expiration-date {
position: absolute;
margin: 0 auto;
top: 180px;
left: 19px;
font-size: 22px;
text-transform: capitalize;
}
.credit-card-box .card-expiration-date {
text-align: right;
left: auto;
right: 20px;
}
.credit-card-box .ccv {
height: 36px;
background: #fff;
width: 91%;
border-radius: 5px;
top: 110px;
left: 0;
right: 0;
position: absolute;
margin: 0 auto;
color: #000;
text-align: right;
padding: 10px;
}
.credit-card-box .ccv label {
margin: -25px 0 14px;
color: #fff;
}
.the-most {
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
width: 50vw;
max-width: 200px;
padding: 10px;
}
.the-most img {
max-width: 100%;
} Step 3 (JavaScript Code):
Finally, we'll create our JavaScript file. This file will contain the code that will actually handle the user input and display of our credit card. In this file, we'll use some basic jQuery scripting to handle all of the user interaction required for a credit card.
Created by: Fabio Ottaviani
$('.input-cart-number').on('keyup change', function(){
$t = $(this);
if ($t.val().length > 3) {
$t.next().focus();
}
var card_number = '';
$('.input-cart-number').each(function(){
card_number += $(this).val() + ' ';
if ($(this).val().length == 4) {
$(this).next().focus();
}
})
$('.credit-card-box .number').html(card_number);
});
$('#card-holder').on('keyup change', function(){
$t = $(this);
$('.credit-card-box .card-holder div').html($t.val());
});
$('#card-holder').on('keyup change', function(){
$t = $(this);
$('.credit-card-box .card-holder div').html($t.val());
});
$('#card-expiration-month, #card-expiration-year').change(function(){
m = $('#card-expiration-month option').index($('#card-expiration-month option:selected'));
m = (m < 10) ? '0' + m : m;
y = $('#card-expiration-year').val().substr(2,2);
$('.card-expiration-date div').html(m + '/' + y);
})
$('#card-ccv').on('focus', function(){
$('.credit-card-box').addClass('hover');
}).on('blur', function(){
$('.credit-card-box').removeClass('hover');
}).on('keyup change', function(){
$('.ccv div').html($(this).val());
});
setTimeout(function(){
$('#card-ccv').focus().delay(1000).queue(function(){
$(this).blur().dequeue();
});
}, 500);Final Output:
Conclusion:
In conclusion, building your own credit card using HTML, CSS, and JavaScript can be a fun and rewarding project. With the step-by-step guide provided in this tutorial, you can create a custom credit card UI with ease. By following the instructions, you will learn how to design a credit card layout, add styling with CSS, and add interactivity with JavaScript.
Remember, this tutorial assumes basic knowledge of HTML, CSS, and JavaScript. If you are new to these languages, it's recommended that you first learn the basics before attempting to build a credit card UI.We hope this tutorial has been helpful, and we encourage you to keep exploring the possibilities of HTML, CSS, and JavaScript. If you want to learn more about web development, there are many resources available online. Good luck with your credit card project!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
