Design for AI

Copy link feedback

Copy link feedback: a CSS button. Copy the rules, or the prompt that rebuilds it.

sharecopy-linkroundedicontext-swap

CSS
.btn-187 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/1 system-ui,sans-serif;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s,color .15s,border-color .15s
}
.btn-187:hover {
  background: #fff;
  border-color: #9ca3af;
  color: #111827
}
.btn-187:focus-visible {
  outline: 2px solid #374151;
  outline-offset: 3px
}
.btn-187:active {
  background: #dcfce7;
  border-color: #16a34a;
  color: #166534
}
.btn-187:active span {
  font-size: 0
}
.btn-187:active span::after {
  content: "Copied";
  font-size: 14px
}
HTML
<button class="btn-187"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg><span>Copy link</span></button>
Prompt

A copy-link button: grey #f9fafb with 1px #e5e7eb border, 8px radius, #374151 14px medium text with a 15px inline chain-link icon, 10px by 16px padding. Hover goes white with a darker border. While pressed the button flashes green (#dcfce7, #16a34a border, #166534 text) and the label reads "Copied" via a font-size-zero swap on the span. Focus 2px dark outline. Actual clipboard copy needs one line of JS.

Same shelf