Credit card design with HTML and CSS animation only.
A simple animation, the effect of turning the card from front to back, and only with the help of CSS. A beautiful HTML credit card for your project.
Super
0
71
If you or your project is in need of a stylish yet simple digital credit card, this project is for you.
Pleasant appearance, ease of editing to fit your needs. You can take the code below or download the full image archive.
The code only uses HTML and CSS. No JS code, 3D credit card flip effect 180 degrees horizontally.
There are styles for the front and back of the card.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Card</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Josefin Sans', sans-serif;
}
.container{
min-height: 100vh;
width: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.card{
width: 500px;
height: 300px;
color: #fff;
cursor: pointer;
perspective: 1000px;
}
.card-inner{
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.front, .back{
width: 100%;
height: 100%;
background-image: linear-gradient(45deg, #0045c7, #ff2c7d);
position: absolute;
top: 0;
left: 0;
padding: 20px 30px;
border-radius: 15px;
overflow: hidden;
z-index: 1;
backface-visibility: hidden;
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
}
.map-img{
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
z-index: -1;
}
.card-no{
font-size: 35px;
margin-top: 60px;
}
.card-holder{
font-size: 12px;
margin-top: 40px;
}
.name{
font-size: 22px;
margin-top: 20px;
}
.bar{
background: #222;
margin-left: -30px;
margin-right: -30px;
height: 60px;
margin-top: 10px;
}
.card-cvv{
margin-top: 20px;
}
.card-cvv div{
flex: 1;
}
.card-cvv img{
width: 100%;
display: block;
line-height: 0;
}
.card-cvv p{
background: #fff;
color: #000;
font-size: 22px;
padding: 10px 20px;
}
.card-text{
margin-top: 30px;
font-size: 14px;
}
.signature{
margin-top: 30px;
}
.back{
transform: rotateY(180deg);
}
.card:hover .card-inner{
transform: rotateY(-180deg);
}
</style>
<body>
<div class="container">
<div class="card">
<div class="card-inner">
<div class="front">
<img src="images/map.png" class="map-img">
<div class="row">
<img src="images/chip.png" width="60px">
<img src="images/visa.png" width="80px">
</div>
<div class="row card-no">
<p>4242</p>
<p>4242</p>
<p>4242</p>
<p>4242</p>
</div>
<div class="row card-holder">
<p>CARD HOLDER</p>
<p>VALID TILL</p>
</div>
<div class="row name">
<p>JOE ALISON</p>
<p>10 / 23</p>
</div>
</div>
<div class="back">
<img src="images/map.png" class="map-img">
<div class="bar"></div>
<div class="row card-cvv">
<div>
<img src="images/pattern.png">
</div>
<p>825</p>
</div>
<div class="row card-text">
<p>This is a virtual card design built using HTML and CSS</p>
</div>
<div class="row signature">
<p>CUSTOMER SIGNATURE</p>
<img src="images/visa.png" width="80px">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
