30+ Impressive CSS Business Cards (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS business card code examples. These CSS business cards totally impress people!
1. Animated CSS Business Card
Author: Laura Pinto (lauraalpinto)
Links: Source Code / Demo
Created on: January 18, 2019
Made with: HTML, SCSS
Tags: business-card, portfolio, scss, animation
2. CSS Grid : Business Card
Experimenting with Css Grid and with its properties. Created the Business Card template using Css Grid which I found here: https://www.behance.net/gallery/27133319/Material-Business-Card-Template-(Freebie) Icons made by: www.freepik.com
Author: Siddharth Hubli (SRHubli)
Links: Source Code / Demo, Behance Page
Created on: July 31, 2018
Made with: HTML, CSS, JS
Tags: css-grid, business-card, html-and-css, material design
3. Geometric Business Card With CSS Grid
Playing around with css grid, flexbox, clip-path, and radial-gradient Recreating the business card template as found here: https://novadonna.me/product/business-card-template-designs-pop-geometric/
Author: Liz Wendling (Elwend)
Links: Source Code / Demo, Novadonna.me
Created on: March 24, 2018
Made with: HTML, Less, JS
Tags: css-grid, flexbox, card
4. Flipping CSS Business Card
100dayscss #034 Fipping Business Card Interactive card design with text clip-mask + background-clip linear-gradient animation.
Author: Sabine Robart (Artemis1)
Links: Source Code / Demo
Created on: October 31, 2018
Made with: HTML, SCSS, JS
Tags: background-clip, linear-gradient, design, card, interactive
5. One Punch Man - CSS Business Card
Experimenting with Css Grid and with its properties. Created the Business Card template using Css Grid which I found here: https://www.behance.net/gallery/27133319/Material-Business-Card-Template-(Freebie) Icons made by: www.freepik.com
Author: Siddharth Hubli (SRHubli)
Links: Source Code / Demo
Created on: July 31, 2018
Made with: HTML, CSS, JS
Tags: css-grid, business-card, html-and-css, material design
6. CSS Business Card
Quick business card design that I decided to print Patrick Bateman's credentials on. 100% CSS3, with the :hover and :focus styles of the button element being used to allow for a smooth two-stage animation.
Author: Thomas Hanson (swellfoop)
Links: Source Code / Demo
Created on: September 10, 2018
Made with: HTML, CSS
Tags: css, animation, business-card, isometric, 3d
7. Black CSS Business Card
This pen is sketch for a digital business card
Author: jasper (jboeijenga)
Links: Source Code / Demo
Created on: September 4, 2014
Made with: HTML, CSS, JS
Tags: css, animation, 3d, flipping-card
8. Business Card
Author: Gigi (gigiyeh)
Links: Source Code / Demo
Created on: November 12, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
9. Inspiration Card
Author: Dannie Vinther (dannievinther)
Links: Source Code / Demo
Created on: September 18, 2017
Made with: HTML, CSS
Tags: card, announcement
10. Dark Business Card
About: This is an online version of my business card. Feel free to suggest improvements. Contribution & Suggestions You can usually reach me on Twitter. Want to build cool stuff? I am always looking forward to meeting new people. If you want to work with me or just want to connect, me...Read More
Author: Lubos (mrlubos)
Links: Source Code / Demo
Created on: August 16, 2016
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: business, card, html, css, javascript
11. 3D Flip Business Card
gradient pattern based on pattern by Kakha Kakhadzen https://dribbble.com/shots/2908379-Pattern-for-Business-Cards
Author: Elena Nazarova (nazarelen)
Links: Source Code / Demo, Dribbble.com
Created on: August 22, 2016
Made with: HTML, CSS
12. My Flippable Digital Business Card
My flippable online business card! Be sure to check out the social links on the back they have a neat fill effect too. If you follow me I do follow back. Enjoy! :D
Author: Peter Girnus (Gothburz)
Links: Source Code / Demo
Created on: October 27, 2015
Made with: HTML, SCSS
Tags: business-card, social-icons, css, flippable, minimal
13. Business Card Design - Reddit
A business card concept I created for a little challenge over at http://reddit.com/r/web_design!
Author: Eduard Kosicky (heyitsedward)
Links: Source Code / Demo, Reddit.com
Created on: July 28, 2014
Made with: HTML, SCSS
Tags: flat, card, css, minimal
14. CSS Business Card
This pen is sketch for a digital business card
Author: jasper (jboeijenga)
Links: Source Code / Demo
Created on: September 4, 2014
Made with: HTML, CSS, JS
Tags: css, animation, 3d, flipping-card
15. Business Card
One of my ideas for a business card that I may make into a real business card.
Author: Zach Saucier (ZachSaucier)
Links: Source Code / Demo
Created on: April 10, 2015
Made with: HTML, SCSS, JS
Tags: css, card, business-card
16. Interactive, Pure CSS Business Card
I've gone way too far, I guess. This is a submission for the /r/web_design subreddit challenge. An interactive business card. There are no JavaScript involved (except the stupid Typekit font-loading JS) and no arbitrary loading to image files (everything is handled in SVGs). Why is it cl...Read More
Author: Tyler Godfrey (TGAmpersand)
Links: Source Code / Demo
Created on: August 3, 2014
Made with: HTML, SCSS, JS
Tags: business-card, interactive, css-only, animations, showcase
17. Css Business Card
Author: amine (aminejafur)
Links: Source Code / Demo
Created on: January 30, 2018
Made with: HTML, Less
18. Materialize Styled Business Card Demo
A quick MaterializeCSS styled business card I threw together for my portfolio site. You can easily replace the Base64 image with the profile image of your choosing. Also, for fun I experimented with a way to allow the use of either Font-Awesome or Materialize for certain icons - I used som...Read More
Author: Joshua T (joshuatz)
Links: Source Code / Demo
Created on: December 12, 2018
Made with: HTML, CSS
Tags: materializecss, materialize, business-card, google material, portfolio
19. Hover-effect-card
Author: Kesavaraj (kesavaraj)
Links: Source Code / Demo
Created on: November 10, 2019
Made with: HTML, CSS
Tags: card, hover-card, business-card, product-card, image-hover
20. Card With CSS
Author: Saeed Hassanvand (Hassanvand)
Links: Source Code / Demo
Created on: October 8, 2019
Made with: HTML, CSS
Tags: card, business-card
21. Business Card
Author: Rick (iPhyse)
Links: Source Code / Demo
Created on: September 23, 2019
Made with: HTML, SCSS
Tags: business-card, card, business
22. Fancy Hover Effect For Cards
Author: Hakan Kösekadam (hakankoesekadam)
Links: Source Code / Demo
Created on: May 15, 2019
Made with: HTML, SCSS, JS
Tags: fancy, hover, no-js, business-card, card
23. Responsive Business Card
Author: Joe Hastings (JoeHastings)
Links: Source Code / Demo
Created on: October 6, 2017
Made with: Haml, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css-grid, business-card
24. HTML Business Card
Simple HTML Business Card Template, fixed width and 300x600 .
Author: Margus Lillemägi (VisualAngle)
Links: Source Code / Demo
Created on: December 2, 2017
Made with: HTML, CSS
Tags: business, card, business-card, 300x600
25. Responsive Business Card
Author: Joe Hastings (JoeHastings)
Links: Source Code / Demo
Created on: October 6, 2017
Made with: Haml, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css-grid, business-card
26. Amon WindReaver CSS Card
i made it for envato contest and just wanted to share here also.
Author: Binary (VoidBoy)
Links: Source Code / Demo
Created on: June 23, 2015
Made with: HTML, CSS
Tags: business-card, visiting-card, portfolio, animation
More Awesome Lists:
Share: