CSS Business Cards code and Demo
In this post, we will give you information about CSS Business Cards code and Demo. Here we will give you details about CSS Business Cards code and Demo And how to use it also give you a demo for it if it is necessary. CSS Business Cards code and Demo we could find on the web. Also, This is Codepen example.
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 – CSS Business Cards
Author: Dannie Vinther (dannievinther)
Links: Source Code / Demo
Created on: September 18, 2017
Made with: HTML, CSS
Tags: card, announcement
10. Dark Business Card – CSS Business Cards
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 – CSS Business Cards
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 – CSS Business Cards
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!
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 – CSS Business Cards
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). CSS Business Cards
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 – CSS Business Cards
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 300×600 – CSS Business Cards
Author: Margus Lillemägi (VisualAngle)
Links: Source Code / Demo
Created on: December 2, 2017
Made with: HTML, CSS
Tags: business, card, business-card, 300×600
25. Responsive Business Card – CSS Business Cards
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
Conclusion for CSS Business Cards code and Demo
Hope this code and post will help you implement CSS Business Cards code and Demo. if you need any help or any feedback give it in the comment section or if you have a good idea about this post you can give it in the comment section. Your comment will help us to help you more and improve us.