پیشنمایش زنده
کد 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>Wallet</p>
</div>
کد CSS
.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;
}