Borde degradado

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

CSS

.btn-026 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #111827;
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 24px;
  cursor: pointer;
  isolation: isolate;
  transition: color .2s
}
.btn-026::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg,#f43f5e,#8b5cf6,#3b82f6);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1
}
.btn-026:hover {
  color: #8b5cf6
}
.btn-026:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 3px
}
.btn-026:active {
  background: #faf5ff
}

HTML

<button class="btn-026">Upgrade</button>

Prompt

Un botón blanco con borde degradado de 2px (135deg de rosa #f43f5e a violeta #8b5cf6 a azul #3b82f6) hecho con un pseudoelemento enmascarado para que el interior siga blanco. Texto #111827 de 14px semibold, radio de 10px, padding de 12px por 24px. Al pasar el cursor el texto se vuelve violeta; en active el fondo se tiñe de #faf5ff. Outline de foco de 2px violeta.

Borde degradado

Misma estantería