Sparkle KI-Outline

Sparkle KI-Outline: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein umrandeter KI-Button, dessen 2px Rahmen und Text denselben Violett-Pink-Orange-Gradient tragen (#8b5cf6, #ec4899, #f97316): der Rahmen per Doppel-Hintergrund-Trick mit padding-box/border-box und transparentem Rahmen, das Label per background-clip text, dazu ein pinkes Inline-Sparkle-Icon. 10px Radius, weißes Inneres, 11px mal 20px Padding, 14px semibold. Hover fügt einen weichen pinken Schatten hinzu und hebt 1px an. Focus: 2px pinke Outline.

Sparkle KI-Outline

Gleiches Regal