Cambiar la apariencia del botón “Back to Top”

Un poco de código CSS para cambiar la apariencia del botom Back to Top en DIVI.

Copiar el código en CSS Personalizado.

/*Cambio de estilo al Boton Back to Top*/
.et_pb_scroll_top.et-visible {
opacity: 1;
-webkit-animation: fadeInbottom 3s 1 cubic-bezier(.77,0,.175,1);
-moz-animation: fadeInbottom 3s 1 cubic-bezier(.77,0,.175,1);
-o-animation: fadeInbottom 3s 1 cubic-bezier(.77,0,.175,1);
animation: fadeInbottom 3s 1 cubic-bezier(.77,0,.175,1);
}
.et_pb_scroll_top.et-pb-icon {
right: 20px;
bottom: 90px;
padding: 12px;
border-radius: 50px;
background: rgb(46, 163, 242);
}
.et_pb_scroll_top.et-pb-icon: hover {
background: rgb(225, 30, 40);
}
.et_pb_scroll_top:before {
content: "\36";
}
.et_pb_scroll_top.et-pb-icon: hover {
animation: animationFrames linear 1s;
animation-iteration-count: 1;
transform-origin: 50% 0%;
-webkit-animation: animationFrames linear 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 0%;
-moz-animation: animationFrames linear 1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 0%;
-o-animation: animationFrames linear 1s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 0%;
-ms-animation: animationFrames linear 1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 0%;
}
@keyframes animationFrames{
0% {transform: rotate(0deg);}
20% {transform: rotate(15deg);}
40% {transform: rotate(-10deg);}
60% {transform: rotate(5deg);}
80% {transform: rotate(-5deg);}
100% {transform: rotate(0deg);}
}
@-moz-keyframes animationFrames{
0% {-moz-transform: rotate(0deg);}
20% {-moz-transform: rotate(15deg);}
40% {-moz-transform: rotate(-10deg);}
60% {-moz-transform: rotate(5deg);}
80% {-moz-transform: rotate(-5deg);}
100% {-moz-transform: rotate(0deg);}
}
@-webkit-keyframes animationFrames {
0% {-webkit-transform: rotate(0deg);}
20% {-webkit-transform: rotate(15deg);}
40% {-webkit-transform: rotate(-10deg);}
60% {-webkit-transform: rotate(5deg);}
80% {-webkit-transform: rotate(-5deg);}
100% {-webkit-transform: rotate(0deg);}
}
@-o-keyframes animationFrames {
0% {-o-transform: rotate(0deg);}
20% {-o-transform: rotate(15deg);}
40% {-o-transform: rotate(-10deg);}
60% {-o-transform: rotate(5deg);}
80% {-o-transform: rotate(-5deg);}
100% {-o-transform: rotate(0deg);}
}
@-ms-keyframes animationFrames {
0% {-ms-transform: rotate(0deg);}
20% {-ms-transform: rotate(15deg);}
40% {-ms-transform: rotate(-10deg);}
60% {-ms-transform: rotate(5deg);}
80% {-ms-transform: rotate(-5deg);}
100% {-ms-transform: rotate(0deg);}
}
/*the end*/

 

El código es cortesía de Oliva Marketing.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.