Borda gradiente

Borda gradiente: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão branco com borda gradiente de 2px (135deg, rosé #f43f5e para violeta #8b5cf6 para azul #3b82f6) feita com um pseudo-elemento mascarado, para que o interior continue branco. Texto #111827 em 14px semibold, raio de 10px, padding de 12px por 24px. No hover o texto fica violeta; no active o fundo ganha o tom #faf5ff. Outline de foco de 2px violeta.

Borda gradiente

Mesma prateleira