Post thumbnail: 14 CSS Badges

14 CSS Badges

Collection of free HTML and CSS badge code examples.

Related Articles

  1. CSS Ribbons

Demo image: Download App Badge

Author

  • Mohammad Jamal Dashtaki

Made with

  • HTML / CSS (SCSS)

About the code

Download App Badge

Download app badge with Font Awesome icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: GDPR Badges

Author

  • Kingjohnny

Made with

  • HTML / CSS

About the code

GDPR Badges

GDPR badges in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: linearicons.css

Demo image: Badge Animation SVG Badge Animation SVG - GIF Demo

Author

  • Adelia Gataullina

Made with

  • HTML / CSS

About the code

Badge Animation SVG

SVG badge with CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Hexagon Badges

Author

  • Olivia

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Hexagon Badges

Hexagon badges with Font Awesome icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Contributor Badge Flip Exploration Contributor Badge Flip Exploration - GIF Demo

Author

  • Chris Johnson

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Contributor Badge Flip Exploration

Exploration for animate achievement, attempting to balance practicality and delight.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Badge with Dynamic Text Badge with Dynamic Text - GIF Demo

Author

  • mi-ca

Made with

  • HTML / CSS / JavaScript

About the code

Badge with Dynamic Text

SVG badge emblem with dynamic curved text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Badge Animation Badge Animation - GIF Demo

Author

  • Christine Clark

Made with

  • HTML / CSS (SCSS)

About the code

Badge Animation

Landscape badge CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Small CSS Badge

Author

  • Phil

Made with

  • HTML / CSS (SCSS)

About the code

Small CSS Badge

Small CSS label/badge.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Badges CSS Badges - GIF Demo

Author

  • Littlesnippets.com

Made with

  • HTML / CSS

About the code

CSS Logo/Badges

Collection of pure CSS Logo/Badge examples: retro, hat style, squared and other.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Sunset Badge

Author

  • LukyVJ

Made with

  • HTML / CSS (SCSS)

About the code

CSS Sunset Badge

Sunset behind mountains - pure CSS badge.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated CSS Badge Animated CSS Badge - GIF Demo

Author

  • Zach Cole

Made with

  • HTML / CSS

About the code

Animated CSS Badge

Animated CSS Big Basin Badge. Second in a series of animated park badges.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated CSS Banff Badge Animated CSS Banff Badge - GIF Demo

Author

  • Zach Cole

Made with

  • HTML / CSS

About the code

Animated CSS Banff Badge

First in a series of animated National Park badges.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Title Badges

Author

  • daniesy

Made with

  • HTML / CSS (SCSS)

About the code

Title Badges

Pure CSS title badges.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Badge

Author

  • Hugo Giraudel

Made with

  • HTML / CSS (SCSS)

About the code

CSS Badge

Very pretty and clean HTML and CSS badge.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top