FAB extended

FAB extended: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

An extended FAB: 52px tall yellow #fde047 pill-ish button with 16px radius, a 20px inline plus icon and "New note" in 15px semibold #0f172a, padding 0 22px 0 18px, a deep neutral shadow (0 8px 20px). Hover #facc15 with a 2px lift; active scales 0.97. Focus 3px dark outline.

FAB extended

Same shelf