Esto tomó un día completo de caza y prueba de diferentes métodos. Lo que hice fue deshacerme del nombre de la clase que había agregado a la pestaña «Avanzado» donde creé el botón personalizado. En su lugar, agregué HTML al bloque en la página donde aparecería el botón. También usé un contenedor div para poder centrarlo en la página.
HTML agregado al bloque con nuevos nombres de clase:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
POR QUÉ LOS NIÑOS TIENEN GUARDERÍA
CSS ADICIONAL:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
No estoy seguro de si «necesitaba» usar el !importante, pero dada la cantidad de tiempo que me tomó resolver esto, pensé que era mejor prevenir que curar.
Gracias por las respuestas. Soy un novato total, así que algunos comentarios estaban sobre mi
.