40+ CSS Badges - Free Code + Demos
Collection of 40+ CSS Badges. All items are 100% free and open-source.
1. B Is For Badge
An alphabet side project challenge of many different HTML/CSS/JS examples.
Author: Grace Ongchangco (gongchangco)
Links: Source Code / Demo
Created on: November 13, 2019
Made with: HTML, SCSS
Tags: badges, shapes, badge, html, css
2. Badge
Author: Figachit (figachit)
Links: Source Code / Demo
Created on: June 29, 2019
Made with: HTML, CSS, JS
3. Small CSS Label/badge
Author: Phil (ph1p)
Links: Source Code / Demo
Created on: September 29, 2016
Made with: HTML, SCSS
Tags: typo, label, css, modern
4. Exclusive Badge
Author: Soufiane (Souflogi)
Links: Source Code / Demo
Created on: June 7, 2019
Made with: HTML, CSS
5. Responsive SVG Black Friday Badge
Badge with text on a path using SVG.
Author: Jon Uhlmann (jonnitto)
Links: Source Code / Demo
Created on: November 21, 2018
Made with: HTML, SCSS
Tags: svg, path, badge, responsive
6. CSS Boulder Colorado Patch
Author: Ossian (Rikkokiri)
Created on: October 31, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: cssart, css, patch, illustration
7. Download App Badge
Author: Mohammad Jamal Dashtaki (mjdashtaki)
Links: Source Code / Demo
Created on: July 25, 2018
Made with: HTML, SCSS
Tags: download_badge, download_app, download_fix_badge
8. GDPR Badges
Author: Kingjohnny (kingjohnny)
Links: Source Code / Demo
Created on: June 2, 2018
Made with: HTML, CSS
9. Badge Animation SVG
Author: Adelia Gataullina (gatauade)
Links: Source Code / Demo
Created on: January 25, 2018
Made with: HTML, CSS
10. Hexagon Badges With Font Awesome Icons
Hexagonal badges for Dota 2 roles.
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: January 4, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: badge, hexagon, badges, shapes, dota
11. Contributor Badge Flip Exploration
Exploration for animate achievement, attempting to balance practicality and delight.
Author: Chris Johnson (ChrisJohnson)
Links: Source Code / Demo
Created on: August 13, 2017
Made with: HTML, SCSS, JS
Tags: css, achievement, badge, animation
12. Svg Badge Emblem With Dynamic Curved Text
Author: mi-ca (mi-ca)
Links: Source Code / Demo
Created on: April 14, 2017
Made with: HTML, CSS, JS
Tags: svg, badge, emblem, curved-text
13. Notification Badge Animation
Author: Valery Alikin (AlikinVV)
Links: Source Code / Demo
Created on: March 14, 2019
Made with: HTML, SCSS, JS
Tags: notification, badge, particles, blub
14. Small CSS Label/badge
Author: Phil (ph1p)
Links: Source Code / Demo
Created on: September 29, 2016
Made with: HTML, SCSS
Tags: typo, label, css, modern
15. CSS Logo Badges
Links: Source Code / Demo
16. CSS Badge
Author: Hugo Giraudel (HugoGiraudel)
Links: Source Code / Demo, Dribbble.com
Created on: July 30, 2012
Made with: HTML, SCSS
Tags: css, logo, light
17. Dribbble Recreation: Berlin Badge
Based on this dribbble: https://dribbble.com/shots/2649801-Berlin-Badge The only asset is the SVG code
Author: Antoinette Janus (internette)
Links: Source Code / Demo
Created on: April 13, 2016
Made with: HTML, SCSS
Tags: dribbble, animation, css, svg
18. Tatooine Badge
Hey guys, here is a Tatooine badge created in CSS ! Inspired by this awesome Dribbble shot : https://dribbble.com/shots/1036314-Tatooine-Badge
Author: LukyVJ (LukyVj)
Links: Source Code / Demo
Made with: HTML, SCSS, JS
19. SCSS Star Badges
A simple mixin that allows you to create star badges with SCSS.
Author: Joey Hoer (joeyhoer)
Links: Source Code / Demo
Created on: March 29, 2013
Made with: HTML, SCSS, JS
Tags: badge, star
20. Badge Animation
Playing a little around with SASS Random() and what's possible. Here i made a congratulations box where a given amount of stars pop up behind the medal.
Author: Morten Sassi (moesphemie)
Links: Source Code / Demo
Created on: December 5, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: sass, random, stars, badge, pure-css
21. CSS Animated Notification Badge
CSS3 animated notification badge which animates on value change
Author: sjmcpherson (sjmcpherson)
Links: Source Code / Demo
Created on: October 6, 2013
Made with: HTML, CSS, JS
Tags: menu, badge, notification, css3-animation
22. Rotate Text
Author: Maja Bjeletic (Arkus)
Links: Source Code / Demo
Created on: July 11, 2020
Made with: HTML, SCSS
Tags: badge, rotate, rotatetext
23. Card-Ribbon | CSS
Card ribbon style badge with css
Author: Sudeep Gumaste (sudeepgumaste)
Links: Source Code / Demo
Created on: May 21, 2020
Made with: HTML, SCSS
Tags: ribbon, badge, card, css
24. LIVE Badge
Author: pollypan (pollypocari)
Links: Source Code / Demo
Created on: February 17, 2020
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: badge
25. CSS Badges Chips
Author: abhishek dana (danaabhi7119)
Links: Source Code / Demo
Created on: December 18, 2019
Made with: HTML, CSS
Tags: material chip, notification badge, badge, chip, ui
26. Revised Rounded Buttons
Demo for my article, Jagged Little Pill.
Author: Tyler Sticka (tylersticka)
Links: Source Code / Demo
Created on: August 29, 2019
Made with: HTML, CSS
Tags: button, pill, rounded, badge
27. Card Button
Author: Prasad D. (prasad-d)
Links: Source Code / Demo
Created on: June 12, 2019
Made with: HTML, SCSS
Tags: card, button, hover-effect, css-transition, badge
28. Component: Badge
Author: Lưu An (luckyluu)
Links: Source Code / Demo
Created on: October 2, 2019
Made with: HTML, SCSS
Tags: badge, count
29. GDPR Compliance Badge
Author: Nindos (Nindos)
Links: Source Code / Demo
Created on: July 20, 2018
Made with: HTML, CSS
Tags: gdpr, badge, dpo
30. User Badge
Author: Jupicose Nadoshazoz (jupicose)
Links: Source Code / Demo
Created on: June 25, 2018
Made with: Slim, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: game, gamification, user, badge, player
31. Price Badge
Author: roya (roya-mosavi)
Links: Source Code / Demo
Created on: May 22, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: badge
32. Creating A CSS Badge
This is a simpe example on how to create a 3D badge style
Author: kevin (kev_dev)
Links: Source Code / Demo
Created on: November 2, 2017
Made with: HTML, SCSS
Tags: badge, css, 3d, css3
33. Component: Hotline Badge
Author: Lưu An (luckyluu)
Links: Source Code / Demo
Created on: August 29, 2017
Made with: HTML, SCSS
Tags: hotline, badge
34. Announcement Badges
Announcement badges for heros and headers
Author: Mesut Koca (koca)
Links: Source Code / Demo
Created on: April 5, 2018
Made with: HTML, CSS
Tags: badge, announcement, news, tailwindcss
More Awesome Lists:
Share: