Scale
Redactado por
Sebastian V. Fecha de publicación
03/07/2024
Tiempo de lectura
7 min
Tema
CSS Transform
El lenguaje del "haz clic en mí"
Hay un lenguaje visual que los diseñadores de interacción llevan décadas refinando. Es un código implícito que los usuarios aprenden sin darse cuenta, simplemente navegando por miles de aplicaciones. Uno de los vocabularios más poderosos de ese código es la escala: cuando algo crece, está disponible para interactuar. Cuando algo se encoge, está siendo presionado.
Stripe, Apple, Airbnb y Linear lo usan en cada uno de sus botones primarios. El efecto es tan sutil que el usuario no lo procesa conscientemente, pero lo siente: el botón respira. Está vivo. Quiere que hagas clic.
¿Qué es scale()?
scale() cambia el tamaño visual de un elemento sin alterar el espacio que ocupa en el layout. Piensa en él como una lupa que amplía o reduce la imagen del elemento en su pantalla de cristal, sin mover la lupa de su sitio.
Los valores funcionan como multiplicadores:
- scale(1): Tamaño original. Es el punto de partida neutral.
- scale(1.1): 10% más grande. Un crecimiento sutil y elegante, perfecto para hovers.
- scale(1.5): 50% más grande. Llamativo, se usa en galerías y efectos de zoom.
- scale(0.95): 5% más pequeño. Ideal para el estado
:activede botones, simulando que se presionan físicamente. - scale(0): El elemento desaparece (tamaño cero). Útil para animaciones de aparición/desaparición.
Escalado uniforme vs independiente
scale(valor) con un solo valor escala el elemento de forma proporcional en ambos ejes. Pero también puedes controlar cada eje por separado:
scaleX(1.5): Solo ensancha el elemento horizontalmente.scaleY(0.5): Solo aplana el elemento verticalmente.scale(1.5, 0.8): Versión abreviada de ambas (ensancha y aplana al mismo tiempo).
El escalado independiente es una herramienta de diseño creativa. Puedes usar scaleX() para animar una barra de progreso que crece horizontalmente, o scaleY() para hacer que un accordion se "despliegue" verticalmente de forma orgánica.
El trío de estados: rest → hover → active
El patrón más efectivo en la industria para los botones de llamada a la acción (CTA) es el siguiente: el botón empieza en su tamaño normal (scale(1)), crece al hacer hover (scale(1.05)) y se comprime al hacer clic (scale(0.97)). Esta secuencia simula perfectamente la física de presionar un botón real y genera un feedback visual que satisface profundamente al usuario.
Consejo profesional
Usa cubic-bezier(0.34, 1.56, 0.64, 1) como función de timing para scale. Este 'ease de muelle' (spring ease) genera un pequeño rebote que hace que el crecimiento se sienta orgánico y no mecánico. Es el mismo efecto que Apple y otras marcas premium usan en sus interfaces.
Escala viva
<div class="contenedor-botones">
<button class="btn-principal">Empezar ahora</button>
<button class="btn-icono">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</button>
</div>Pasa el ratón y haz clic en los botones. El botón principal crece en hover y se comprime en :active. El icono de corazón crece con spring ease.
Errores comunes
Botones que respiran
Crea tres variantes de botón: uno que solo crece en hover, uno que crece y se comprime al hacer clic, y uno de icono que late (scale loop con animación keyframe).