How to create: CSS ribbon

How to create a ribbon

Step 1 - Add HTML:

In this example, the ribbon belongs to the button element:

<button class="btn">A button for something cool <span class="ribbon">NEW</span></button>

Step 2 - Add CSS:

.btn {
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #282A35;
  color: white;
  position: relative;
}
.ribbon {
  width: 60px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
  right: -25px;
  top: -12px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(20deg);
  background-color: #ff9800;
  color: white;
}

Try it yourself

Example Explanation:

In this example, CSS is used to add a ribbon effect to a button. This ribbon effect is achieved by adding a span element with a specific style inside the button element. This span element is positioned at the upper right corner of the button and is rotated 20 degrees to create the ribbon effect. The background color and text color of the ribbon are also set to different colors from the button to enhance the visual effect.