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:hoverand:focusstyles 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