Eckband

Eckband: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein dunkler #0f172a Button, 8px Radius, weißer 15px semibold Text mit extra Padding rechts (14px 40px 14px 24px), overflow hidden, mit einem kleinen bernsteinfarbenen #fbbf24 Band, um 45 Grad über die obere rechte Ecke gedreht, mit "BETA" in 9px dunklen Versalien. Hover hellt den Button auf #1e293b und das Band auf #fde68a auf; Active #020617. Focus: 2px bernsteinfarbene Outline.

Eckband

Gleiches Regal