Píldora compartir

Píldora compartir: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Una píldora de compartir neutra: blanca, borde 1px #d1d5db, texto #111827 14px semibold "Share" con un icono inline de compartir de 16px (flecha que sale de una bandeja), padding 10px 18px 10px 14px. En hover el borde se oscurece, añade una sombra ligera y desplaza el icono 2px hacia arriba; active #f3f4f6. Focus con outline oscuro de 2px.

Píldora compartir

Misma estantería