FAB erweitert

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

fabpill iconlabelfloating

CSS

.btn-167 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  font: 600 15px/1 system-ui,sans-serif;
  color: #0f172a;
  background: #fde047;
  border: 0;
  border-radius: 16px;
  padding: 0 22px 0 18px;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px #0005;
  transition: box-shadow .2s,transform .2s,background .2s
}
.btn-167:hover {
  background: #facc15;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px #0006
}
.btn-167:focus-visible {
  outline: 3px solid #0f172a;
  outline-offset: 3px
}
.btn-167:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 4px 10px -4px #0005
}

HTML

<button class="btn-167"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>New note</button>

Prompt

Ein erweiterter FAB: 52px hoher gelber #fde047 pillenartiger Button mit 16px Radius, einem 20px Inline-Plus-Icon und "New note" in 15px semibold #0f172a, Padding 0 22px 0 18px, ein tiefer neutraler Schatten (0 8px 20px). Hover #facc15 mit 2px Anhebung; Active skaliert auf 0.97. Focus: 3px dunkle Outline.

FAB erweitert

Gleiches Regal