Brilho IA contornado

Brilho IA contornado: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

sparkleairoundedoutline gradient-border icon

CSS

.btn-177 {
  font: 600 14px/1 system-ui,sans-serif;
  background: linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#8b5cf6,#ec4899,#f97316) border-box;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  transition: box-shadow .2s,transform .2s
}
.btn-177 span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  background: linear-gradient(120deg,#8b5cf6,#ec4899,#f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.btn-177 svg {
  color: #ec4899
}
.btn-177:hover {
  box-shadow: 0 6px 18px -6px #ec489988;
  transform: translateY(-1px)
}
.btn-177:focus-visible {
  outline: 2px solid #ec4899;
  outline-offset: 3px
}
.btn-177:active {
  transform: translateY(0);
  box-shadow: none
}

HTML

<button class="btn-177"><span><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z"/></svg>Generate</span></button>

Prompt

Um botão de IA contornado cuja borda de 2px e cujo texto usam o mesmo gradiente violeta-rosa-laranja (#8b5cf6, #ec4899, #f97316): a borda via truque de fundo duplo padding-box/border-box com borda transparente, o label via background-clip text, e um ícone inline de brilho rosa. Raio de 10px, interior branco, padding 11px por 20px, 14px semibold. No hover ganha uma sombra rosa suave e sobe 1px. Focus com outline rosa de 2px.

Brilho IA contornado

Mesma prateleira