The CSS badge class is used to supplement the text with additional information. Some websites, for example, correlate several notifications with the link. The notification number is seen while signing in to a particular website and indicates the number of news or messages to view. This class assists web developers in adding circular badges to their sites.

Badges may be added to any HTML page. They may be used inside buttons, tables, paragraphs, and lists, among other things. They are pretty handy since they may be placed anywhere on the page.

We have a collection of 30 HTML/ CSS Buttons in this article. The list includes animated CSS badges, authors, source codes, and demos. Everything is open-source and free.

Feel free to use any of these in your exciting projects!

1. Announcement Badges

image 23

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Mesut Koca

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

Created on: April 5, 2018

2. Component Hotline Badge

image 24

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Luu An

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

Created on: August 29, 2017

3. A CSS Badge

image 25

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Kevin

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

Created on: November 2, 2017

4. Price Badge

image 26

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Roya

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

Created on: May 22, 2018.

5. User Badge

image 27

Download Source Code/ View Demo

Made with: HTML, CSS

Author:  Jupicose Nadoshazoz

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

Created on: 25th June 2018

6. GDPR Compliance Badge

image 28

Download Source Code/ View Demo

Made with: HTML, CSS

Author:  Nindos

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

Created on: July 20, 2018

7. Component: Badge

image 29

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Luu An

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

Created on: October 2nd, 2019

8. Card Button

image 30

Download Source Code/ View Demo

Made with: HTML, CSS

Author: prasad D.

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

Created on: June 12, 2019

9. Revised Rounded Buttons

image 31

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Tyler Sticka

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

Created on: August 29, 2019

10. CSS Badge Chips

image 32

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Abhishek Dana

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

Created on: December 18, 2019

11. Live Badge

image 33

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Pollypan

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

Created on: February 17, 202

12. Card Ribbon

image 34

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Sudeep Gumaste

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

Created on: May 21, 2020

13. CSS Notification Badge

image 35

Download Source Code/ View Demo

Made with: HTML, CSS and JS

Author: Sjmchperson

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

Created on: October 6, 2013

14. Badge Animation

CSS Badges Mockup

Download Source Code/ View Demo

Made with: HTML and SASS

Author: Morten Sassi

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

Created on: December 5, 2016

15. SCSS Star Badges

image 36

Download Source Code/ View Demo

Made with: HTML, CSS and JavaScript

Author: Joey Hoer

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

Created on: March 29th, 2013

16. Tatooine Badge

image 37

Download Source Code/ View Demo

Made with: HTML, CSS and JavaScript

Author:  LukyVj

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

Created on: September 12, 2015

17. Dribble Reaction: Berlin

image 38

Download Source Code/ View Demo

Made with: HTML and SCSS

Author: Antoinette Jasnu

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

Created on: Aprile 13, 2016

18. CSS Badge

image 39

Download Source Code/ View Demo

Made with: HTML and SCSS

Author: Hugo Giraudel

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

Created on: July 30, 2012

19. Small CSS Label/Badge

image 40

Download Source Code/ View Demo

Made with: HTML and SCSS

Author: Phil

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

Created on: September 29, 2016

20. Notification Badge Animation

image 41

Download Source Code/ View Demo

Made with: HTML, CSS and JavaScript

Author: Valery Alikin

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

Created on: March 14, 2019

21. SVG Badge Emblem with Dynamic Curved Text

image 42

Download Source Code/ View Demo

Made with: HTML, CSS and JavaScript

Author: Mi-ca

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

Created on: April 14, 2017

22. Contributor Badge Flip Exploration

image 43

Download Source Code/ View Demo

Made with: HTML, CSS and JavaScript

Author: Chris Johnson

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

Created on: August 13, 2017

23. Hexagon Badges with FA icons

image 44

Download Source Code/ View Demo

Made with: PUG and SCSS

Author: Olivia Ng

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

Created on: January 4, 2018

24. SVG Badge Animation

image 45

Download Source Code/ View Demo

Made with: HTML, CSS and JavaScript

Author: Adelia Gataullina

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

Created on: January 25, 2018

25. Download App Badge

image 46

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Mohammad Jamal Dashtaki

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

Created on: July 25, 2018

26. CSS Boulder Colorado Patch

image 47

Download Source Code/ View Demo

Made with: PUG, CSS, and JavaScript

Author:  Ossian

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

Created on: October 31, 2018

27. SVG Black Friday Badge

image 48

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Jon Uhlmann

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

Created on: November 21, 2018

28. Exclusive Badge

image 49

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Souiane

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

Created on: June 7, 2019

29. Small CSS Label/badge

image 50

Download Source Code/ View Demo

Made with: HTML, CSS and JavaScript

Author: Phil

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

Created on: September 29, 2016

30. B is for Badge

image 51

Download Source Code/ View Demo

Made with: HTML, CSS

Author: Grace Ongchangco

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

Created on: November 13, 2019

Categorized in:

Web & Graphics, Web Design,

Last Update:

Tagged in: