Concorde
BETA
Volver al catálogo
03

Register — botón «Regístrate» sin press e input con gradiente de border distinto

17 jul 2026
Producción
Producción — Register — botón «Regístrate» sin press e input con gradiente de border distinto
Concorde
Concorde — Register — botón «Regístrate» sin press e input con gradiente de border distinto

Qué está mal

El botón «Regístrate» (outline) no tiene efecto press: al pulsarlo no cambia de estado.

El gradiente del border de los inputs (Correo/Contraseña) es distinto al de Concorde.

Cómo se corrige

Usar el botón outline de Concorde (.poutline), que sí trae :active con relleno naranja oscuro.

Aplicar el gradiente de border del input de Concorde: default 338deg #8460E5→#FFF8F1, focus 148deg #ED8936→#8460E5.

Código producción
// PROD — botón e input con clases propias (sin :active, gradiente distinto)
<button type="button" className="login-form__register-link">Regístrate</button>

<div className="relative">
  <input id="email" className="login-form__input" type="email" />
</div>
Código Concorde
// Concorde — botón .poutline (CON press) + input .pinput (gradiente exacto)
<button className="poutline" type="button" style={{ width: 296 }}>Regístrate</button>

<div className="pinput-root">
  <div className="pinput">
    <input className="pinput__field" type="email" placeholder="tucorreo@gmail.com" />
  </div>
</div>

/* Button.tsx — el press del outline */
.poutline:active {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(156deg, #D46E20 0%, #B73700 100%);   /* relleno pressed */
}

/* Input.tsx — gradiente del border */
.pinput {
  border: 1px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(338deg, #8460E5 0%, #FFF8F1 100%);   /* default */
}
.pinput:focus-within {
  border-width: 2px;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(148deg, #ED8936 0%, #8460E5 100%);   /* focus */
}