Logotipo Elementor Blanco Leter Redondo
Botón de deslizamiento / de paso

Elementor  Crocoblock  The Plus  Premium Addons  ElementsKit  Ultimate Addons  Element Pack  Essential Addons  Unlimited Elements  PowerPack  HT Mega 

Botón de deslizamiento al pasar por encima

Elementor Botón deslizante al pasar por encima

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

Para crear este efecto tan chulo necesitas los plugins Elementor y The Plus Addons. Visite la página de demostración de >>> Botones de más <<<.

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.

Sus comentarios

Explorar más Widget y Extensions

Categorías

este sitio web contiene

0
+