# Latido magenta (B 107)

Categoría: Botones  
Etiquetas: glow, neon, rounded, pulse, ring  
Página: https://designforai.dev/es/snippet/btn-107

## 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.

## HTML

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

## CSS

```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; }
}
```