Add a “NEW” corner badge/ribbon to a Bubble button using CSS

Tips
1

image
image948×376 5.06 KB

If you want to highlight a Bubble button with a small “NEW” badge, you can do it using a simple CSS ::before pseudo-element. This creates a diagonal ribbon on the top-left corner of the button without needing an extra Bubble element.

First, give your Bubble button an ID attribute, for example:

myButton

Then add this CSS inside an HTML element on the page:

#myButton { position: relative !important; overflow: hidden !important; } #myButton::before { content: "NEW"; position: absolute; top: 7px; left: -21px; width: 72px; height: 13px; background: #ffff00; color: #000000; font-size: 7px; font-weight: 900; letter-spacing: 0.5px; transform: rotate(-45deg); transform-origin: center center; z-index: 20; pointer-events: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; padding-top: 1px; }

This will place a yellow diagonal “NEW” ribbon on the top-left side of the button.

You can easily customize it by changing:

content: “NEW”;

to any label you want, such as:

content: "HOT";
content: "BETA";
content: "PRO";
content: "SALE";

You can also adjust the ribbon color here:

background: #ffff00;
color: #000000;

Useful for marking new features, beta actions, premium buttons, limited-time offers, or important call-to-action buttons in Bubble apps.

3 Likes