Metallic Gold

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

gradientmetallicshineluxury

CSS

.btn-031 {
  font: 600 14px/1 system-ui,sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3f2a00;
  background: linear-gradient(180deg,#fde68a 0%,#f59e0b 45%,#d97706 55%,#fbbf24 100%);
  border: 1px solid #b45309;
  border-radius: 6px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff7d6,0 2px 4px rgba(0,0,0,.2);
  transition: filter .15s
}
.btn-031:hover {
  filter: brightness(1.06)
}
.btn-031:focus-visible {
  outline: 2px solid #b45309;
  outline-offset: 3px
}
.btn-031:active {
  filter: brightness(.9);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25)
}

HTML

<button class="btn-031">Reserve</button>

Prompt

Ein metallischer Gold-Button: vertikaler Verlauf #fde68a nach #f59e0b bei 45%, eine harte Stufe auf #d97706 bei 55%, zurück zu #fbbf24, plus 1px Rahmen #b45309, ein 1px blasser innerer Glanz oben und ein dunkler Schatten 0 2px 4px. Dunkelbrauner Text in Versalien 14px mit 0.06em Spacing, 6px Radius, 12px mal 26px Padding. Hover hellt 6% auf, active dimmt und zeigt einen Inset-Schatten. Fokus-Outline 2px #b45309.

Metallic Gold

Gleiches Regal