7 efectos CSS para personalizar el botón «volver arriba» de Divi

¡Hola DiviLover! En este post te vamos a enseñar cómo personalizar el botón «volver arriba» de Divi mediante código CSS, una tarea muy sencilla.

Lo primero que debes hacer es activar esta funcionalidad en las opciones del tema.

Para ello, vas a Divi > Opciones de tema > Botón de volver arriba > Activar.

Una vez lo has activado, ya puedes personalizar tu botón de «volver arriba» en Divi, para lo cual te proponemos varios diseños y formas.

#1 Botón «volver arriba» cuadrado

Empezamos por algo sencillo, un botón cuadrado y con fondo liso (negro).

Para conseguir este botón, solo tienes que pegar el siguiente código en tu plantilla (Divi > Opciones de tema > CSS personalizado).

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #fff;
	background: #000;
	border-radius: 0px;
	font-size: 25px;
	}
.et_pb_scroll_top.et-pb-icon {
	color: #fff;
	background: #000;
	border-radius: 0px;
	font-size: 25px;
	}

Si quieres este mismo botón, pero con fondo blanco y flecha negra, el código es:

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #000;
	background: #fff;
	border-radius: 0px;
	font-size: 25px;
	}
.et_pb_scroll_top.et-pb-icon {
	color: #000;
	background: #fff;
	border-radius: 0px;
	font-size: 25px;
	}

#2 Botón «volver arriba» redondo

Si prefieres un botón de «volver arriba» en Divi redondo en vez de cuadrado, te dejamos dos códigos diferentes:

• Botón redondo con fondo negro y flecha blanca:

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #fff;
	background: #000;
	border-radius: 100px;
	font-size: 25px;
	}
.et_pb_scroll_top.et-pb-icon {
	color: #fff;
	background: #000;
	border-radius: 100px;
	font-size: 25px;
	}

• Botón redondo con fondo blanco y flecha negra:

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #000;
	background: #fff;
	border-radius: 100px;
	font-size: 25px;
	}
.et_pb_scroll_top.et-pb-icon {
	color: #000;
	background: #fff;
	border-radius: 100px;
	font-size: 25px;
	}

#3 Botón «volver arriba» con borde

Pasamos ahora a los botones con borde, para los que también tenemos dos opciones diferentes:

• Botón cuadrado con fondo negro, borde blanco y flecha blanca:

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #fff;
	background: #000;
	border-radius: 0px;
	font-size: 25px;
	border: 2px solid #fff;
	}
.et_pb_scroll_top.et-pb-icon {
	color: #fff;
	background: #000;
	border-radius: 0px;
	font-size: 25px;
	}

• Botón redondo con fondo blanco, borde negro y flecha negra:

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #000;
	background: #fff;
	border-radius: 100px;
	font-size: 25px;
	border: 2px solid #000;
	}
.et_pb_scroll_top.et-pb-icon {
	color: #000;
	background: #fff;
	border-radius: 100px;
	font-size: 25px;
	}

#4 Botón «volver arriba» con efecto degradado

Por último, te dejamos un código CSS para conseguir un botón con efecto degradado como el de nuestra web.

Solo tienes que utilizar el siguiente código y cambiar los dos colores, en nuestro caso #ef3028 y #f89637:

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #fff;
	background: linear-gradient(250deg,#ef3028 0%,#f89637 100%);
	border-radius: 100px;
	font-size: 25px;
	}
.et_pb_scroll_top.et-pb-icon {
	color: #fff;
	background: linear-gradient(250deg,#ef3028 0%,#f89637 100%);
	border-radius: 100px;
	font-size: 25px;
	}

Si quieres conseguir otro efecto o diseño diferente, solo tienes que jugar con estos códigos.

De paso, te recomiendo echarle un vistazo a las tendencias en diseño web más actuales para encontrar inspiración.

Esperamos que con estos efectos CSS para el botón «volver arriba» de Divi puedas personalizar un poco más tu sitio web.