Animated Wallet Card With HTML & CSS
Hey Programmers! In this post, we will make an animated wallet card with pure HTML & CSS. This tutorial aims at how you can create visually appealing & integrative UI elements without using JavaScript.
In this tutorial, we will walk through concepts like CSS Variables, SVG integration & hover effects that scale and elevate the card.
Also Read: Gradient Glowing Cards with HTML & CSS
We will understand each line of CSS code step by step so that you can use the concepts used in this project to create other awesome projects. At the end of this post, I will share the entire source code so that you can run this project on your local device.
Concepts Used To Make Animated Wallet Cards
- CSS Box Shadow, Box Model & FlexBox
- CSS Transform & Transition
- CSS Border Radius & HTML SVG
Understanding HTML To Make Animated Wallet Card
- Card Wallet Container (
<div class="card wallet">): Wraps all the content related to the wallet card. - Overlay Div (
<div class="overlay"></div>): Creates an overlay effect for the card. - Circle Div with SVG Icon (
<div class="circle">...</div>): Contains the circular area where the SVG icon is displayed. - SVG Icon (
<svg>...</svg>): Defines the SVG icon using the<svg>element. Contains various graphical elements like rectangles, polygons, and ellipses that make up the icon. - Text Content (
<p>JSM Wallet</p>): Displays the text “JSM Wallet” below the SVG icon.
Also Read: Glassmorphism Cards with Hover Animation
Understanding CSS To Make Animated Wallet Card
.wallet {
--bg-color: #ceb2fc;
--bg-color-light: #f0e7ff;
--text-color-hover: #fff;
--box-shadow-color: rgba(206, 178, 252, 0.48);
}- Wallet Styles:
- Defines custom CSS variables for wallet elements.
- Sets background color, light background color, text color on hover, and box shadow color.
.card {
width: 220px;
height: 321px;
background: #fff;
border-top-right-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease-out;
text-decoration: none;
}- Card Styles:
- Sets the dimensions and background color for the card.
- Applies border-radius to the top right corner.
- Hides overflow content.
- Uses flexbox for vertical alignment and centering.
- Applies a box shadow for a subtle depth effect.
- Defines a transition effect for smooth animation.
- Removes default hyperlink styling.
.card:hover {
transform: translateY(-5px) scale(1.005) translateZ(0);
box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
0 24px 46px var(--box-shadow-color);
}- Card Hover Styles:
- Translates and scales the card slightly on hover to create a lifting effect.
- Adjusts the box shadow on hover for a more pronounced depth effect.
.card:hover .overlay {
transform: scale(4) translateZ(0);
}- Overlay Hover Styles:
- Scales up the overlay on hover to reveal more of it.
.card:hover .circle {
border-color: var(--bg-color-light);
background: var(--bg-color);
}- Circle Hover Styles:
- Changes the border color and background color of the circle on hover.
.card:hover .circle:after {
background: var(--bg-color-light);
}- Circle After Hover Styles:
- Changes the background color of the circle’s pseudo-element on hover.
.card:hover p {
color: var(--text-color-hover);
}- Paragraph Hover Styles:
- Changes the color of the paragraph text on hover.
.card p {
font-size: 17px;
color: #4c5656;
margin-top: 30px;
z-index: 1000;
transition: color 0.3s ease-out;
}- Paragraph Styles:
- Sets the font size, color, and margin for the paragraph text.
- Defines a transition effect for color change.
.circle {
width: 131px;
height: 131px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
transition: all 0.3s ease-out;
}- Circle Styles:
- Sets the dimensions, border radius, background color, and border color for the circle.
- Uses Flexbox for content alignment.
- Defines a transition effect for smooth animation.
.circle:after {
content: "";
width: 118px;
height: 118px;
display: block;
position: absolute;
background: var(--bg-color);
border-radius: 50%;
top: 7px;
left: 7px;
transition: opacity 0.3s ease-out;
}- Circle After Styles:
- Creates a pseudo-element to overlay the circle.
- Sets its dimensions, background color, border radius, position, and transition effect.
.circle svg {
z-index: 10000;
transform: translateZ(0);
}- Circle SVG Styles:
- Sets a high z-index and applies a transformation for optimal rendering.
.overlay {
width: 118px;
position: absolute;
height: 118px;
border-radius: 50%;
background: var(--bg-color);
top: 70px;
left: 50px;
z-index: 0;
transition: transform 0.3s ease-out;
}- Overlay Styles:
- Sets the dimensions, position, border radius, background color, and initial position for the overlay.
- Defines a transition effect for smooth animation.
Source Code Of Animated Wallet Card
HTML:
<div class="card wallet">
<div class="overlay"></div>
<div class="circle">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="23 29 78 60" height="60px" width="78px">
<defs></defs>
<g transform="translate(23.000000, 29.500000)" fill-rule="evenodd" fill="none" stroke-width="1" stroke="none" id="icon">
<rect rx="4.70247832" height="21.8788565" width="9.40495664" y="26.0333433" x="67.8357511" fill="#AC8BE9" id="Rectangle-3"></rect>
<rect rx="4.70247832" height="10.962961" width="9.40495664" y="38.776399" x="67.8357511" fill="#6A5297" id="Rectangle-3"></rect>
<polygon points="57.3086772 0 67.1649301 26.3776902 14.4413177 45.0699507 4.58506484 18.6922605" fill="#6A5297" id="Rectangle-2">
</polygon>
<path fill="#8B6FC0" id="Rectangle" d="M0,19.6104296 C0,16.2921718 2.68622235,13.6021923 5.99495032,13.6021923 L67.6438591,13.6021923 C70.9547788,13.6021923 73.6388095,16.2865506 73.6388095,19.6104296 L73.6388095,52.6639057 C73.6388095,55.9821635 70.9525871,58.672143 67.6438591,58.672143 L5.99495032,58.672143 C2.68403068,58.672143 0,55.9877847 0,52.6639057 L0,19.6104296 Z"></path>
<path fill="#F6F1FF" id="Fill-12" d="M47.5173769,27.0835169 C45.0052827,24.5377699 40.9347162,24.5377699 38.422622,27.0835169 L36.9065677,28.6198808 L35.3905134,27.0835169 C32.8799903,24.5377699 28.8078527,24.5377699 26.2957585,27.0835169 C23.7852354,29.6292639 23.7852354,33.7559532 26.2957585,36.3001081 L36.9065677,47.0530632 L47.5173769,36.3001081 C50.029471,33.7559532 50.029471,29.6292639 47.5173769,27.0835169"></path>
<rect height="12.863158" width="15.6082259" y="26.1162588" x="58.0305835" fill="#AC8BE9" id="Rectangle-4"></rect>
<ellipse ry="2.23319575" rx="2.20116007" cy="33.0919007" cx="65.8346965" fill="#FFFFFF" id="Oval">
</ellipse>
</g>
</svg>
</div>
<p>JSM Wallet</p>
</div>CSS:
<style>
.wallet {
--bg-color: #ceb2fc;
--bg-color-light: #f0e7ff;
--text-color-hover: #fff;
--box-shadow-color: rgba(206, 178, 252, 0.48);
}
.card {
width: 220px;
height: 321px;
background: #fff;
border-top-right-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease-out;
text-decoration: none;
}
.card:hover {
transform: translateY(-5px) scale(1.005) translateZ(0);
box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
0 24px 46px var(--box-shadow-color);
}
.card:hover .overlay {
transform: scale(4) translateZ(0);
}
.card:hover .circle {
border-color: var(--bg-color-light);
background: var(--bg-color);
}
.card:hover .circle:after {
background: var(--bg-color-light);
}
.card:hover p {
color: var(--text-color-hover);
}
.card p {
font-size: 17px;
color: #4c5656;
margin-top: 30px;
z-index: 1000;
transition: color 0.3s ease-out;
}
.circle {
width: 131px;
height: 131px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
transition: all 0.3s ease-out;
}
.circle:after {
content: "";
width: 118px;
height: 118px;
display: block;
position: absolute;
background: var(--bg-color);
border-radius: 50%;
top: 7px;
left: 7px;
transition: opacity 0.3s ease-out;
}
.circle svg {
z-index: 10000;
transform: translateZ(0);
}
.overlay {
width: 118px;
position: absolute;
height: 118px;
border-radius: 50%;
background: var(--bg-color);
top: 70px;
left: 50px;
z-index: 0;
transition: transform 0.3s ease-out;
}
</style> Last Updated: June 18, 2024
About Author
