Barrido desde la esquina

Barrido desde la esquina: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

hover-fillcornercircle-growrounded

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
}

HTML

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

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.

Barrido desde la esquina

Misma estantería