DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Trending Card Design - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Trending Card Design
ankushsingh
Jan 13, 2026
4
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="flex"> <div class="card" style="--url:url(https://images.unsplash.com/photo-1662393997616-c8d292bfa5a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bWFjbGFyZW4lMjA1NzBzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60)"> <p class="">Mc'Laren</p> <div class="card-button-wrapper"> <div class="curve crv-bottom"> </div> <div class="curve crv-right"> </div> <div class="card-button"> Mc'Laren </div> </div> </div> </div>
1
* { margin:0; padding:0; } :root { --card-width:300px; --card-height:150px; --background-color:#343434; --url:url('https://images.unsplash.com/photo-1596906673164-fffb05b8333d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); } body { height:100vh; display:grid; place-items:center; background:var(--background-color); font-family:sans-serif; text-transform:uppercase; } .flex { display:flex; flex-wrap:wrap; transition: all 1s ease; } .card { position:relative; width:var(--card-width); height:var(--card-height); background-image:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7625759776566876) 100%),var(--url); background-size:cover; background-position:center center; border-radius:calc( 0.15 * var(--card-height)); transition:all .2s ease-in-out; display:grid; place-items:center; color:#fff; font-weight:bolder; font-size:2rem; margin:.5em; } .card-button-wrapper { position:absolute; bottom:0; right:0; width:calc( 0.3 * var(--card-height)); height:calc( 0.3 * var(--card-height)); background:var(--background-color); border-radius: calc( 0.2 * var(--card-height)) 0 0 0; padding:calc( 0.064 * var(--card-height)) 0 0 calc( 0.064 * var(--card-height)); } .card-button { display:grid; place-items:center; width:calc( 0.3 * var(--card-height)); height:calc( 0.3 * var(--card-height)); border-radius:50%; background:#fff; color:#000; bottom:0; right:0; font-size:calc( 0.03 * var(--card-height)); transition:all .2s ease-in-out; } .curve { width:calc( 0.15 * var(--card-height)); height:calc( 0.15 * var(--card-height)); background: radial-gradient(circle, rgba(255,0,0,0) calc(70% - 1px), var(--background-color) 70%, var(--background-color) 100%); background-position:calc( -0.15 * var(--card-height)) calc( -0.15 * var(--card-height)); background-repeat:repeat; background-size:200% 200%; } .crv-right { position:absolute; bottom:calc( 0.361 * var(--card-height)); right:-1px; } .crv-bottom { position:absolute; bottom:-1px; right:calc( 0.361 * var(--card-height)); } .card-button:hover { transform:rotate(-30deg); } .card-button:hover { display:grid; place-items:center; width:calc( 0.3 * var(--card-height)); height:calc( 0.3 * var(--card-height)); border-radius:50%; background:#fff; color:#000; bottom:0; right:0; font-size:calc( 0.03 * var(--card-height)); transition:all .2s ease-in-out; }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!