How to Create a Stylish Ribbon Banner Using HTML and CSS

Creating visually appealing banners is essential for drawing attention to important announcements, promotions, or special offers on a website. In this tutorial, we will explore how to create a stylish ribbon banner using HTML and CSS. This simple yet elegant design will enhance the look of your website while maintaining a modern and professional appearance.

---

What You Will Learn

✅ How to create a ribbon banner structure with HTML 🖥️
✅ Styling the banner using CSS for a polished look 🎨
✅ Adding ribbon tails using pseudo-elements for a realistic effect ✨
✅ Implementing a hover effect for an interactive experience 🌟
✅ Customizing the banner’s color and text to match your website’s theme 🎯

---

Step 1: Setting Up the HTML Structure

Start by creating a simple div element for the ribbon banner. This element will hold the text and serve as the base of our banner.

<div class="ribbon-banner">
    Special Announcement
</div>

---

Step 2: Styling the Ribbon Banner with CSS

Now, let’s style the banner to make it visually appealing. We’ll use background colors, padding, and text formatting to enhance its design.

.ribbon-banner {
    position: relative;
    background-color: #4caf50;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    padding: 15px 30px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}

---

Step 3: Adding Ribbon Tails with Pseudo-Elements

To create the ribbon tails, we use ::before and ::after pseudo-elements, positioning them at the left and right sides of the banner.

.ribbon-banner::before,
.ribbon-banner::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    background-color: #4caf50;
    transform: translateY(-50%) rotate(45deg);
    z-index: -1;
}

.ribbon-banner::before {
    left: -15px;
}

.ribbon-banner::after {
    right: -15px;
}

---

Step 4: Adding a Hover Effect

To make the banner interactive, let’s add a slight color change effect on hover.

.ribbon-banner:hover {
    background-color: #45a044;
    cursor: pointer;
}

---

GitHub Repository

Access the complete source code on GitHub:
🔗 Ribbon Banner Design GitHub Repo

---

Video Tutorial

Watch the full step-by-step video tutorial here:

---

Final Thoughts

By following these steps, you’ve successfully created a stylish and functional ribbon banner using HTML and CSS. This design can be customized further to match the branding of your website and make your announcements more noticeable. Experiment with different colors, fonts, and sizes to create unique variations!

If you found this tutorial helpful, don’t forget to like 👍, comment 💬, and subscribe 🔔 to Madras Academy for more web development tips and tutorials! 🚀