Design for AI

FAB extendido

FAB extendido: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

fabpilliconlabelfloating

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

Un FAB extendido: botón amarillo #fde047 de 52px de alto, casi píldora con radio 16px, un icono de más inline de 20px y "New note" en 15px semibold #0f172a, padding 0 22px 0 18px, sombra neutra profunda (0 8px 20px). Hover #facc15 con elevación de 2px; active escala 0.97. Focus con outline oscuro de 3px.

Misma estantería