Hola @alba_auto y @joaquindeco,
Exacto, el problema del z-index es común con modales y popups que suelen tener valores muy altos. Para la animación suave, necesitas aplicar la propiedad transition al elemento base, no solo al :hover. Esto le dice al navegador que cualquier cambio en las propiedades especificadas debe ser animado a lo largo de un tiempo.
Aquí te dejo una versión mejorada para tu themes/classic/assets/css/custom.css que debería resolver ambos puntos:
/* Botón Volver Arriba */
#back-to-top-button {
position: fixed;
bottom: 25px;
right: 25px;
background-color: #007bff;
color: white;
border-radius: 50%;
width: 50px;
height: 50px;
Explicación de los cambios:
z-index: 1000;: He aumentado el z-index a un valor mucho más alto. La mayoría de los modales y popups de módulos de terceros en PrestaShop rara vez superan el 999. Con 1000, el botón debería estar siempre por encima. Si aún así tuvieras problemas con algún modal específico, podrías subirlo un poco más, pero 1000 suele ser suficiente.transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;: Esta es la clave para la animación suave. La he añadido al selector #back-to-top-button (el estado normal) para que la transición se aplique tanto al entrar como al salir del hover. Esto indica que los cambios en background-color, box-shadow y transform se animarán durante 0.3 segundos con una función de tiempo ease.box-shadow: 0 5px 15px rgba(0,0,0,0.3);: En el estado :hover, la sombra se hace más grande y difusa, dando esa sensación de que el botón se eleva.transform: scale(1.05);: También en el :hover, el botón se agranda un 5%, lo que combinado con la sombra, refuerza el efecto de "elevación".
Con estos ajustes, tu botón debería verse y comportarse como esperas, con animaciones fluidas y siempre visible.