HTML + CSSCards
3D flipping bank card
A metal card that tilts with the pointer and flips over to show its back when pressed.
Settings
16px
1x
Code
<button type="button" class="uv-kbf" aria-pressed="false" aria-label="Show the back of the card"><span class="in"><span class="fr"><span class="br">Aimran Bank</span><span class="ch"></span><svg class="nf" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M8 7.5a6 6 0 0 1 0 9M11.5 5a10 10 0 0 1 0 14M15 3a13.5 13.5 0 0 1 0 18"/></svg><span class="nb">5412 •••• •••• 2026</span><span class="nm">LUCÍA MARTÍN</span><span class="ex">08/29</span><span class="sh"></span></span><span class="bk"><span class="mg"></span><span class="sg"><span>CVV</span><b>•••</b></span><span class="lg">Tap to flip</span></span></span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
Fintech apps and card landing pages love a card that feels like an object. This one has a brushed metal surface, a gold chip and a contactless mark; it tilts in 3D toward the pointer with a moving sheen, and a click or Enter turns it over to reveal the magnetic stripe and the signature panel with the CVV hidden.
The whole card is a toggle button with aria-pressed, so the flip works with the keyboard and screen readers. Change the two colors for black and gold, silver and blue, or your own brand metal.