Necesita crear un botón con efecto al pasar el mouse con Elementor ?
Si es así, toma asiento en este magnífico autobús, porque lo que lograremos hoy está en el siguiente video:
Vamos a crear una página y luego modificarla con Elementor, luego seleccione una estructura de 2 columnas. En el panel vamos a modificar la sección recién creada seleccionando Altura mínima en el campo hauteur y inmediatamente Altura mínima hagamos clic en VH luego coloque el cursor en 100.
En la pestaña Estilo cambiemos el color de fondo a # 070e39.
En la primera columna, suelte un widget de botón, modifique su texto escribiendo Ver detalles y alineémoslo a la derecha
En la pestaña Estilo vamos a modificarlo tipografía cambiando el tamaño de 15, en Mayúscula et espaciado de letras en 1.1
En la pestaña Avanzado, modificar todo Marges en 20 y en la sección CSS personalizado, peguemos el siguiente código que agrega un degradado al botón:
selector {
–Btn-ancho: 180px;
–Btn-altura: 50px;
–Btn-background: # 0e1538;
–Degradado a la izquierda: # F803F8;
–Degradado derecho: # 03F2FD;
}
selector un {
position: relative;
ancho: var (–btn-ancho);
altura: var (–btn-altura);
}
selector a: antes,
selector a: after {
feliz: ";
position: absolute;
recuadro: 0;
transición: 0.5 s;
}
selector a: nth-child (1): antes,
selector a: nth-child (1): después de {
fondo: gradiente lineal (45deg, var (–degradado-izquierdo), var (–btn-fondo), var (–btn-fondo), var (–derecha-gradiente));
}
selector a: flotar: antes de {
recuadro: -3px;
}
selector a: flotar: después de {
recuadro: -3px;
filtro: desenfoque (10px);
}
selector un lapso {
position: absolute;
Top: 0;
izquierda: 0;
anchura: 100%;
Altura: 100%;
fondo: var (–btn-background);
z-index: 10;
pantalla: flexión;
justify-content: centro;
alinear elementos: centro;
sobrecarga oculta;
}
Ahora si pasas el cursor sobre el botón descubrirás magníficos efectos.
Para agregar un efecto de vidrio brillante en el botón, peguemos también el siguiente código:
/ * Efecto de cristal brillante * /
selector a span :: before {
feliz: ";
position: absolute;
Top: 0;
izquierda: -50%;
anchura: 100%;
Altura: 100%;
fondo: rgba (255,255,255,0.075);
transformar: sesgar (160 grados);
}
Observa un nuevo efecto que aporta más luz al botón.
Lea también: Cómo crear una sección de miembros del equipo con Elementor
Ahora copiemos este botón y peguemos en la segunda columna. Cambiemos la alineación del botón a la izquierda y cambiemos el texto a Ver más.
Ahora solo tienes que publicar su trabajo o previsualizarlo.
Aquí hay 2 hermosos botones creados.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este tutorial que le muestra cómo crear un botón con efecto de desplazamiento con el creador de la página Elementor. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
