Hola Elementors,
hoy me gustaría mostrarte un sencillo truco de cómo puedes crear un "Botón Deslizante" en Hover con Elementor Pro y The Plus Addons. Con unos pocos ajustes de css personalizado y en los estilos puedes crear tus botones individuales de deslizamiento de llamadas a acciones en Hover.
5 pasos para crear "botones deslizantes" con The Plus Addons y CSS personalizado
1. Activar "The Plus Addons" y "Botón" Widget
2. Añadir "TPButton" Widget
Arrastre y suelte el widget "TPButton" dentro de la sección principal.
3. Elija "Estilo 2" y añada la clase CSS
Seleccione Estilo 2 en la pestaña de contenido y añade una clase CSS al widget: mi botón
4. Añadir CSS personalizado
Añade el siguiente código a tu CSS personalizado en la pestaña avanzada:
.mybutton i{
padding:0px !important;
width:50px !important;
altura:50px !importante;
color: blanco !importante;
}
.mybutton .pt_plus_button.button-style-2 .button-link-wrap:hover .btn-icon {
transformar: rotar(15deg);
}
5. Su estilo final
Es importante: Establecer el color del texto como transparente en estado NORMAL (1)
El resto de los ajustes se pueden encontrar en las imágenes y por ensayo y error 😉 o simplemente descargar el archivo .json de abajo.
Palabras finales y descarga del archivo .JSON
Así de fácil puedes crear un botón de deslizamiento al pasar por encima con la versión Pro de Elementor y The Plus Addons para Elementor. Un pequeño truco con un gran efecto, que a sus clientes les encantará usando Elementor. Puedes encontrar más widgets geniales para Elementor en la sección Tabla completa Widget. Diviértete y deja un comentario.
