Animar un botón (ZOOM)

LATAM
1

Sigue los pasos a continuación para agregarle la animación de “zoom” a un botón:

1. Copia el siguiente código:

 @keyframes zoom {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.zoom {
animation: zoom 2s infinite;
}
  1. Pégalo en Custom Codes > Custom CSS

2023-02-13 at 17.34
2023-02-13 at 17.34691×408 41.1 KB

  1. Luego haz click en el botón que quieres que tenga movimiento > Haz click en “Advanced” > Bajo “CSS Classes” escribe zoom:
    image

Recuerda guardar los cambios y eso es todo!

:bangbang: IMPORTANTE :bangbang:

Para que el código funcione es necesario tener tu dominio propio conectado

1 Like
2

¡Hola Analía! :wave:

¡Gracias por compartir este tip tan útil! :raised_hands: La animación de zoom realmente puede hacer que los botones destaquen y llamen más la atención del usuario.

Solo quería añadir que si alguien necesita una versión más personalizada del efecto (por ejemplo, velocidad diferente, tamaño del zoom, o activarlo solo al pasar el cursor), también se puede ajustar el código un poco más. Por ejemplo:

.zoom:hover {
  animation: zoom 1s infinite;
}

Y si alguien necesita ayuda para implementarlo directamente en su embudo, ¡con gusto puedo darles una mano con soporte práctico! :computer::sparkles:

¡Gracias de nuevo por el aporte, y bien hecho!

Saludos,
Anwer

2 Likes