Collection of free HTML and CSS business card code examples from codepen and other resources. Update of February 2019 collection. 2 new items.
Related Articles
- CSS Cards
- CSS Blog Cards
- CSS Card Hover Effects
- CSS Card Layouts
- CSS Flip Cards
- CSS Material Design Cards
- CSS Movie Cards
- CSS Profile Cards
- CSS Recipe Cards
- CSS Credit Cards
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Flipping Business Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS (SCSS)
About the code
Business Card
Business card in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Animated Business Card
Pure CSS animated business card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Fipping Business Card
Interactive card design with background-clip: text
+ background: linear-gradient
animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
Business Card
Business card in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Material Business Card
CSS material business card
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (Less)
About the code
Geometric Business Card with CSS Grid
Playing around with CSS Grid, Flexbox, clip-path
, and radial-gradient
.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Inspiration Business Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
Business Card
Pure CSS animated business card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
3D Flip Business Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Haml) / CSS (SCSS) / JavaScript
About the code
Business Card
Flipping business card in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Flippable Digital Business Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About the code
Business Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JavaScript
About the code
CSS Business Card
This example is sketch for a digital business card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS)
About the code
Business Card Concept
Business card concept in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: ionicons.css

CSS3 Business Card
Flippable CSS3 business card.
Made by Mark Murray
October 16, 2015