Design for AI

Share pill icon

Share pill icon: a CSS button. Copy the rules, or the prompt that rebuilds it.

sharepilliconoutlinegeneric

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

A neutral share pill: white, 1px #d1d5db border, #111827 14px semibold "Share" with a 16px inline share-arrow icon (arrow up out of a tray), padding 10px 18px 10px 14px. Hover darkens the border, adds a light shadow and nudges the icon up 2px; active #f3f4f6. Focus 2px dark outline.

Same shelf