Link kopieren Feedback

Link kopieren Feedback: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein Link-kopieren-Button: grau #f9fafb mit 1px #e5e7eb Rahmen, 8px Radius, #374151 14px medium Text mit einem 15px Inline-Kettenglied-Icon, 10px mal 16px Padding. Hover wird weiß mit dunklerem Rahmen. Während er gedrückt ist, blitzt der Button grün auf (#dcfce7, #16a34a Rahmen, #166534 Text) und das Label zeigt "Copied" über einen font-size-zero Tausch auf dem Span. Focus: 2px dunkle Outline. Das eigentliche Kopieren in die Zwischenablage braucht eine Zeile JS.

Link kopieren Feedback

Gleiches Regal