Manu Martínez Marketing

Botón de regreso arriba – Elementor PRO

¡Hey equipo! Les comparto los comandos y los códigos de CSS para que puedan seguir el tutorial.

➡️ Comando para personalizar el tamaño del icono:

“haz el ícono de 20 pixeles”

Código CSS


 selector .elementor-button-icon svg 
 {
 width: 20px;
 height: 20px;
 }

➡️ Comando para crear un degradado de fondo animado:

“Crea un fondo animado de tres colores en la clase .elementor-button. De #F10357 a #B47CFD a #FFA886, en un ángulo de 45 grados, durante 3 segundos y en bucle infinito. Haz que sea suave.”

Código CSS:


 selector .elementor-button {
 background: linear-gradient(65deg, #F10357, #B47CFD, #FFA886);
 background-size: 200% 200%;
 animation: gradientBG 3s ease infinite;
 }

 @keyframes gradientBG {
 0% {
 background-position: 0% 50%;
 }
 50% {
 background-position: 100% 50%;
 }
 100% {
 background-position: 0% 50%;
 }
 }

➡️ Comando para agregar animación de movimiento al icono:

Al pasar el ratón, agrega un efecto de movimiento hacia arriba en el ícono con una transición suave de .8 segundos. Agrega una transición suave después de quitar el estado de hover.

Código CSS:

 
 selector .elementor-button-icon {
 transition: transform 0.8s ease;
 }

 selector .elementor-button:hover .elementor-button-icon {
 transform: translateY(-5px);
 }

 selector .elementor-button {
 transition: all 0.8s ease;
 }

➡️ CSS para ocultar el botón:


 selector{
 opacity: 0;
 transition: all 0.3s ease-in-out;
 }
 body.show selector{
 opacity: 1;
 }

➡️ Código Java para hacer funcionar el efecto de ocultar botón


 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
 var offset = 300
 $(window).on('load scroll', function(){
    
    if( $(window).scrollTop() > offset ){
        $('body').addClass('show')
    }else{
        $('body').removeClass('show')
    }
 })
 </script>

¿Necesitas ayuda con un proyecto web o de marketing digital?

Suscríbete

GoBaby quiere acompañarte en cada una de las etapas de tu bebé.

Suscríbete a nuestro newsletter.