Latido magenta

Latido magenta: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

glow neonroundedpulsering

CSS

.btn-107 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #db2777;
  border: 0;
  border-radius: 10px;
  padding: 14px 28px;
  cursor: pointer;
  text-shadow: 0 0 6px #fff8;
  animation: beat107 1.6s ease-out infinite;
  transition: background .15s
}
.btn-107:hover {
  background: #be185d;
  animation-duration: .8s
}
.btn-107:focus-visible {
  outline: 2px solid #db2777;
  outline-offset: 5px
}
.btn-107:active {
  animation: none;
  transform: scale(.97)
}
@keyframes beat107 {
  0% {
    box-shadow: 0 0 0 0 #db277799
  }
  100% {
    box-shadow: 0 0 0 14px #db277700
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-107, .btn-107 * { animation: none; transition: none; }
}

HTML

<button class="btn-107">Go live</button>

Prompt

Un botón magenta #db2777, radio de 10px, texto blanco de 15px en negrita con un leve resplandor de texto blanco, padding de 14px por 28px. Un anillo magenta translúcido se expande desde el borde hasta 14px y se desvanece cada 1.6 segundos, como un latido. Al pasar el cursor se oscurece a #be185d y el ritmo se duplica; en active el anillo se detiene y se escala a 0.97. Foco con outline magenta de 2px y offset de 5px.

Latido magenta

Misma estantería