Hola @miriamdev,
El problema que describes es muy común al querer dar un toque de elegancia a elementos CSS. Tal como han apuntado @antonioonline y @inmaiberia65, la clave para la animación suave es la propiedad transition y para la elevación, box-shadow. Además, para que la aparición del botón sea también suave, es mejor manipular la opacity y visibility en lugar de display: none.
Aquí tienes una versión mejorada de tu CSS que puedes añadir a themes/classic/assets/css/custom.css. Asumo que ya tienes algo de JavaScript para añadir/quitar la clase show según el scroll, ya que el CSS solo define cómo se ve y anima, no cuándo aparece o desaparece.
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007bff;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
Con estos cambios, el botón debería aparecer y desaparecer con un fundido suave, tener una animación elegante al pasar el ratón y una sombra que le dé profundidad. El z-index de 1040 es un buen punto de partida para que esté por encima de la mayoría de elementos del tema Classic, pero debajo de modales muy críticos. Las media queries se encargarán de la adaptabilidad en móviles.