Ribbon corner

Ribbon corner: a CSS button. Copy the rules, or the prompt that rebuilds it.

stickerbadgeribbonrotationrectangle

CSS

.btn-159 {
  position: relative;
  overflow: hidden;
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #0f172a;
  border: 0;
  border-radius: 8px;
  padding: 14px 40px 14px 24px;
  cursor: pointer;
  transition: background .2s
}
.btn-159 span {
  position: absolute;
  top: 6px;
  right: -22px;
  transform: rotate(45deg);
  font: 700 9px/1 system-ui,sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0f172a;
  background: #fbbf24;
  padding: 3px 24px;
  transition: background .2s,transform .2s
}
.btn-159:hover {
  background: #1e293b
}
.btn-159:hover span {
  background: #fde68a;
  transform: rotate(45deg) translateY(-1px)
}
.btn-159:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 3px
}
.btn-159:active {
  background: #020617
}

HTML

<button class="btn-159">Start<span>Beta</span></button>

Prompt

A dark #0f172a button, 8px radius, white 15px semibold text with extra right padding (14px 40px 14px 24px), overflow hidden, with a small amber #fbbf24 ribbon rotated 45 degrees across the top-right corner reading "BETA" in 9px uppercase dark text. Hover lightens the button to #1e293b and the ribbon to #fde68a; active #020617. Focus 2px amber outline.

Ribbon corner

Same shelf