Copiar enlace

Copiar enlace: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de copiar enlace: gris #f9fafb con borde 1px #e5e7eb, radio 8px, texto #374151 14px medium con un icono inline de eslabón de 15px, padding 10px por 16px. En hover pasa a blanco con borde más oscuro. Mientras está pulsado el botón destella en verde (#dcfce7, borde #16a34a, texto #166534) y la etiqueta muestra "Copied" mediante un intercambio con font-size cero en el span. Focus con outline oscuro de 2px. La copia real al portapapeles necesita una línea de JS.

Copiar enlace

Misma estantería