How to Create Badges using HTML and CSS ? Last Updated : 27 Dec, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that they have more rounded corners. HTML is used to create the basic structure of the badge and CSS properties add styles to the elements. Example 1: In this example, we will create the badge with HTML and CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> How to Create a Badge using HTML and CSS? </title> <style> .container { text-align: center; } .badge { background-color: green; color: #fff; font-size: 0.8em; padding: 5px 10px; border-radius: 4px; margin-left: 5px; } </style> </head> <body> <div class="container"> <h2> GeeksforGeeks <span class="badge">New</span> </h2> <h3> GeeksforGeeks <span class="badge">New</span> </h3> <h4> GeeksforGeeks <span class="badge">New</span> </h4> </div> </body> </html> Output: Example 2: In this example, we will create the badge with HTML and CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <title> </title> <style> body { margin: 0; padding: 0; text-align: center; } .btn { color: green; display: inline-block; padding: 0.375rem 0.75rem; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 0.25rem; } .badge { display: inline-block; padding: 0.25em 0.5em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; } .secondary { background-color: #6c757d; color: #fff; } .warning { background-color: #ffc107; color: #212529; } .danger { background-color: #dc3545; color: #fff; } button { margin: 10px; } </style> </head> <body> <button type="button" class="btn"> Notifications <span class="badge secondary">4</span> </button> <button type="button" class="btn"> Messages <span class="badge warning">10</span> </button> <button type="button" class="btn"> Updates <span class="badge danger">2</span> </button> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create Badges using HTML and CSS ? V vkash8574 Follow Improve Article Tags : Web Technologies Geeks Premier League Web Templates Geeks Premier League 2023 Similar Reads How to Create Browsers Window using HTML and CSS ? The browser window is a tool to view the pages from the internet. It is used to search the content on the internet and get relevant information from the internet. Creating Structure: In this section, we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons 3 min read How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu 5 min read How to create a progress bar using HTML and CSS? The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can use HTML and CSS. To make that progress bar responsive you will need JavaScript.In this article, we will learn to create progr 1 min read How to create a Hero Image using HTML and CSS ? A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The 2 min read Create an Icon Bar using HTML and CSS This article provides a complete idea of how to create an Icon Bar using HTML and CSS. HTML is used to design the structure, and CSS applies styles to the elements to make the user interface (UI) attractive. To add the Icons, we use the Font Awesome icons CDN link in the head section, and add the ic 2 min read Like