Design for AI

FAB estendido

FAB estendido: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um FAB estendido: botão amarelo #fde047 de 52px de altura, quase pílula com raio de 16px, um ícone de mais inline de 20px e "New note" em 15px semibold #0f172a, padding 0 22px 0 18px, uma sombra neutra profunda (0 8px 20px). Hover #facc15 com subida de 2px; active escala 0.97. Focus com outline escuro de 3px.

Mesma prateleira