Design for AICuña cónica en órbita
Cuña cónica en órbita: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
@property --a102 {
syntax: "<angle>";
inherits: false;
initial-value: 120deg
}
.btn-102 {
position: relative;
font: 600 14px/1 system-ui,sans-serif;
color: #111827;
background: #fff;
border: 0;
border-radius: 10px;
padding: 13px 24px;
cursor: pointer;
isolation: isolate
}
.btn-102::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 12px;
background: conic-gradient(from var(--a102),#e5e7eb 0 70%,#111827 100%);
z-index: -1
}
.btn-102::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: #fff;
z-index: -1
}
.btn-102:hover::before {
animation: spin102 1.2s linear infinite
}
.btn-102:focus-visible {
outline: 2px solid #111827;
outline-offset: 4px
}
.btn-102:active::after {
background: #f3f4f6
}
@keyframes spin102 {
to {
--a102: 480deg
}
}
@media (prefers-reduced-motion: reduce) {
.btn-102, .btn-102 * { animation: none; transition: none; }
}
HTML
<button class="btn-102">Try it free</button>Prompt
Un botón blanco de 10px de radio con un borde de 2px gris claro #e5e7eb salvo por una cuña oscura #111827, hecha con un degradado cónico. La cuña está quieta hasta el hover, y entonces orbita el botón una vez cada 1.2s usando un ángulo @property animado. Texto #111827 de 14px semibold, padding de 13px por 24px. En active el interior se tiñe de #f3f4f6, el foco es un outline oscuro de 2px con offset de 4px.