# Barrido desde la esquina (B 063)

Categoría: Botones  
Etiquetas: hover-fill, corner, circle-grow, rounded  
Página: https://designforai.dev/es/snippet/btn-063

## Prompt

Un botón de contorno rosa (borde de 2px #be185d, texto rosa, radio de 10px, padding de 12px por 26px, relleno blanco). Al pasar el cursor un círculo pequeño anclado en la esquina superior izquierda se escala 20x (350ms) para inundar el botón de rosa mientras el texto se vuelve blanco. Active #9d174d. Outline de foco de 2px rosa.

## HTML

```html
<button class="btn-063">Sweep</button>
```

## CSS

```css
.btn-063 {
  position: relative;
  overflow: hidden;
  font: 600 14px/1 system-ui,sans-serif;
  color: #be185d;
  background: #fff;
  border: 2px solid #be185d;
  border-radius: 10px;
  padding: 12px 26px;
  cursor: pointer;
  z-index: 0;
  transition: color .35s
}
.btn-063::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #be185d;
  transform: scale(0);
  transition: transform .35s ease;
  z-index: -1
}
.btn-063:hover {
  color: #fff
}
.btn-063:hover::before {
  transform: scale(20)
}
.btn-063:focus-visible {
  outline: 2px solid #be185d;
  outline-offset: 3px
}
.btn-063:active::before {
  background: #9d174d
}
```