Pílula de compartilhar

Pílula de compartilhar: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

CSS

.btn-186 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 system-ui,sans-serif;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  cursor: pointer;
  transition: background .15s,border-color .15s,box-shadow .15s
}
.btn-186 svg {
  transition: transform .2s
}
.btn-186:hover {
  border-color: #111827;
  box-shadow: 0 2px 8px -2px #0002
}
.btn-186:hover svg {
  transform: translateY(-2px)
}
.btn-186:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 3px
}
.btn-186:active {
  background: #f3f4f6
}

HTML

<button class="btn-186"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M7 8l5-5 5 5M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5"/></svg>Share</button>

Prompt

Uma pílula neutra de compartilhar: branca, borda de 1px #d1d5db, "Share" em #111827 14px semibold com um ícone inline de 16px de seta de compartilhar (seta subindo de uma bandeja), padding 10px 18px 10px 14px. No hover a borda escurece, surge uma sombra leve e o ícone sobe 2px; active #f3f4f6. Focus com outline escuro de 2px.

Pílula de compartilhar

Mesma prateleira