FreeWeb
Grey 3D button with hover effect by cssbuttons-io
- 386386 downloads
- 243243 likes
- 153153 saves
Works with
- Claude Code
- Codex
- Cursor
- and 3 more
Two-sided card that flips on hover v1.0.0
Use this resource to present two pieces of information on one card
New
- 434 downloads
- 214 likes
- 180 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install flip-card-hoverFirst time: connect the CLI with
npx --yes palatekit@latest loginThe agent builds a card with a front and a back, each with title and description, rotating 180 degrees on hover. Faces are editable gradients. You get a component useful for study cards or offers.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeWeb
Black button with hover effect "Massive Mayfly" by cssbuttons-io
- 334334 downloads
- 194194 likes
- 201201 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Teal 3D button with hover effect by cssbuttons-io
- 336336 downloads
- 145145 likes
- 207207 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Green loader by fanishah
- 381381 downloads
- 221221 likes
- 209209 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Green button with hover effect by cssbuttons-io
- 415415 downloads
- 153153 likes
- 145145 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
White button by YUGE0
- 412412 downloads
- 193193 likes
- 123123 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Animated white 3D button by cssbuttons-io
- 366366 downloads
- 194194 likes
- 202202 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
White 3D card with hover effect by javierBarroso
- 388388 downloads
- 153153 likes
- 193193 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- README.md: step-by-step integration guide
- Cards/david-mohseni_black-bobcat-14.html: the component HTML and CSS, ready to copy
- The variables and selectors to edit for colours and size
Good fit for
- Revision or vocabulary cards
- Offer with details on the back
- Team: photo on front, role on back
Not for
- Touch screens without a hover fallback
- Long content: the card has a fixed size
Tags
- card
- 3d
- flip
- hover
- css
About
You say
"Create three flip cards with the resource component for my offers, price on the back."
Component published by david-mohseni on Uiverse under the MIT license, documented by PalateKit.
Show moreShow less
Prerequisites
- You bring
- The front and back text and The card colours
How to use it
- Give the resource to your coding agent
- Ask it to insert the component where you want it and adapt text and colours
- Open the page and check hover and mobile rendering
Content preview
Files
- Cards/david-mohseni_black-bobcat-14.html1.7 KB
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- README.md0.7 KB
Origin and licence
Modified by PalateKit
- Author
- david-mohseni
- Source
- github.com/uiverse-io/galaxy/tree/adbd2adde0a299a3956ea288fb444ec01891ca41/Cards/david-mohseni_black-bobcat-14.html
- Licence
- MIT
Notice
Version modifiée de « david-mohseni_black-bobcat-14 » (david-mohseni, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
How do I add it to my site?
Copy the HTML and the CSS block into your page, or the CSS into your stylesheet. No JavaScript is needed.
How do I customise it?
Edit: texts are in the h2 and p tags of front and back; gradients are in .flip::before (violet, orange) and .flip::after; speed in transition (3s). To respect visitors sensitive to motion, wrap the animations in an @media (prefers-reduced-motion: no-preference) rule.