# Barrido de líneas CRT (B 143)

Categoría: Botones  
Etiquetas: cyberpunk, scanline, rectangle, dark, animated  
Página: https://designforai.dev/es/snippet/btn-143

## Prompt

Un botón de terminal retro: verde oscuro #052e16 con borde de 1px #16a34a, radio de 2px, texto verde #4ade80 monoespaciado de 14px semibold con 0.1em de tracking, padding de 13px por 28px, líneas de barrido horizontales tenues (líneas verdes translúcidas de 1px repetidas cada 3px). Una banda verde translúcida barre de arriba abajo cada 2.2s (overflow hidden). Al pasar el cursor el texto se ilumina con un resplandor y el barrido se acelera; en active la base se aclara a #14532d. Foco con outline verde de 2px.

## HTML

```html
<button class="btn-143">Scan</button>
```

## CSS

```css
.btn-143 {
  position: relative;
  overflow: hidden;
  font: 600 14px/1 ui-monospace,Menlo,monospace;
  letter-spacing: .1em;
  color: #4ade80;
  background: #052e16;
  border: 1px solid #16a34a;
  border-radius: 2px;
  padding: 13px 28px;
  cursor: pointer;
  background-image: repeating-linear-gradient(0deg,#0000 0 2px,#4ade8014 2px 3px);
  isolation: isolate;
  transition: color .2s
}
.btn-143::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(#4ade8000,#4ade8055);
  z-index: -1;
  animation: scan143 2.2s linear infinite
}
.btn-143:hover {
  color: #bbf7d0;
  text-shadow: 0 0 6px #4ade80
}
.btn-143:hover::after {
  animation-duration: .9s
}
.btn-143:focus-visible {
  outline: 2px solid #4ade80;
  outline-offset: 3px
}
.btn-143:active {
  background-color: #14532d
}
@keyframes scan143 {
  to {
    top: 140%
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-143, .btn-143 * { animation: none; transition: none; }
}
```