¡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.

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

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).

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

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:

7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* 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:
7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* 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:
7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* 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:
7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* 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:
7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* 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.

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

¡TE REGALAMOS UN DISEÑO PARA DIVI!

Descarga gratis este diseño especialmente pensado para empresas, negocios o freelances.

➤ Diseño para página de inicio o landing page

➤ Opciones del tema con CSS personalizado

➤ Ajustes personalizados: tipografías, colores, títulos...

10% OFF APUNTÁNDOTE A LA NEWSLETTER

¡Consigue un 10% de descuento para todas nuestras plantillas!

RGPD

¡Muchas gracias por suscribirte! Revisa tu email :)