Clay Dark Mode

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

CSS

.btn-135 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #e2e8f0;
  background: #334155;
  border: 0;
  border-radius: 18px;
  padding: 15px 28px;
  cursor: pointer;
  box-shadow: inset -5px -5px 12px #1e293b,inset 5px 5px 12px #475569,6px 6px 16px #0f172a99;
  transition: transform .2s,box-shadow .2s,color .2s
}
.btn-135:hover {
  color: #fff;
  transform: translateY(-2px)
}
.btn-135:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 3px
}
.btn-135:active {
  transform: scale(.97);
  box-shadow: inset -2px -2px 6px #1e293b,inset 2px 2px 6px #475569,2px 2px 6px #0f172a99
}

HTML

<button class="btn-135">Settings</button>

Prompt

Ein dunkler Claymorphism-Button: Schiefer #334155 mit hellerem Inset-Glanz oben links (#475569) und dunklerem Inset-Schatten unten rechts (#1e293b), 12px Blur, plus einem tiefen Drop-Shadow (6px 6px 16px, 60% #0f172a). 18px Radius, #e2e8f0 Text 15px semibold, 15px mal 28px Padding. Hover hellt den Text auf Weiß und hebt 2px; active skaliert 0.97 und flacht die Schatten ab. Fokus 2px graue Outline. Für dunkle Hintergründe.

Clay Dark Mode

Gleiches Regal