Fita no canto

Fita no canto: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão escuro #0f172a, raio de 8px, texto branco 15px semibold com padding extra à direita (14px 40px 14px 24px), overflow hidden, com uma pequena fita âmbar #fbbf24 rotacionada 45 graus cruzando o canto superior direito com o texto "BETA" em 9px, caixa alta, escuro. No hover o botão clareia para #1e293b e a fita para #fde68a; active #020617. Focus com outline âmbar de 2px.

Fita no canto

Mesma prateleira