Destello en órbita
Destello en órbita: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-178 {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
font: 600 14px/1 system-ui,sans-serif;
color: #f5f3ff;
background: #2e1065;
border: 1px solid #6d28d9;
border-radius: 999px;
padding: 11px 22px 11px 16px;
cursor: pointer;
overflow: hidden;
transition: background .2s,border-color .2s
}
.btn-178 i {
width: 14px;
height: 14px;
background: #c4b5fd;
clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
animation: spin178 3s linear infinite
}
.btn-178::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
top: 20%;
left: 70%;
box-shadow: -40px 14px 0 -1px #fff,20px 18px 0 -1px #c4b5fd;
opacity: 0;
transition: opacity .3s
}
.btn-178:hover {
background: #4c1d95;
border-color: #a78bfa
}
.btn-178:hover::after {
opacity: 1;
animation: tw178 1.2s ease-in-out infinite
}
.btn-178:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 3px
}
.btn-178:active {
background: #1e0a3f
}
@keyframes spin178 {
to {
transform: rotate(360deg)
}
}
@keyframes tw178 {
50% {
opacity: .3
}
}
@media (prefers-reduced-motion: reduce) {
.btn-178, .btn-178 * { animation: none; transition: none; }
}
HTML
<button class="btn-178"><i aria-hidden="true"></i>Enhance</button>Prompt
Una píldora IA violeta oscuro #2e1065 con borde 1px #6d28d9, texto pálido #f5f3ff 14px semibold "Enhance" y una estrella de cuatro puntas de 14px (polígono clip-path, #c4b5fd) que gira despacio. En hover el fondo aclara a #4c1d95 y tres puntos diminutos blancos y lavanda (un pseudoelemento más copias con box-shadow) parpadean por el botón. Active #1e0a3f. Focus con outline lavanda de 2px.