Para los primeros dos ejemplos, crearemos el botón desde cero. En el ejemplo 3, simplemente agregaremos estilo CSS a un botón que ya es un elemento existente en la página.

Ejemplos 1 y 2:

Tutorial en video para los Ejemplos 1 y 2:

https://youtu.be/xt_5t7WAP8s

Paso 1: Agrega un elemento de "código" y pega el siguiente código. (nota: puedes cambiar el texto “BOOK NOW” por el CTA/texto que desees y reemplazar “your-image.png” con la imagen/icono que quieras agregar al botón).

<!--FLOATING CALL BUTTON-->

<div id="floating-button">
  <a href="your-destination-url"> BOOK NOW
    <img src="your-image.png" width="30px" border="0">
  </a>
</div>

Este código crea un botón. El siguiente paso es definir su posición, hacerlo fijo al hacer scroll y darle estilo.

Paso 2: Haz clic en el botón Custom CSS y agrega/pega el código de estilo CSS a continuación.

Código de estilo CSS

Ejemplo 1: Estilo de marcador en la parte inferior de la pantalla

/*STYLES FOR FLOATING BUTTON */

#floating-button {
    position: fixed;
    bottom: 0%;
    right: 5%;
    /* transform: rotate(90deg) translateX(50%); */
    transform-origin: center;
    z-index: 20;
}

#floating-button a {
    background: #958cab;
    color: white;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    font-family: DM sans;
    font-weight: 400;
    letter-spacing: 0.1em;
    padding: 10px 30px;
 /*top bottom rightl eft */
    border-radius: 10px 10px 0px 0px;
    transition: ease 0.5s !important;
}

#floating-button a:hover {
    padding: 10px 30px 30px 30px;
 /* top right bottom left*/
    background: #72829f;
}

Ejemplo 2: Otro estilo (esquinas redondeadas en blanco y negro)

/*--------------BOOK NOW BUTTON----------------- */

#floating-button {
    position: fixed;
    bottom: 5%;
    right: 5%;
    /* transform: rotate(90deg) translateX(50%); */
    transform-origin: center;
    z-index: 20;
}

#floating-button a {
    background: #FFFFFF;
    color: black;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 15px 40px;
 /*topbottom rightleft */
    border-radius: 100px 100px 100px 100px;
    border: 2px solid black;
    transition: ease 0.5s !important;
}

#floating-button a:hover {
    padding: 15px 40px;
 /* top right bottom left*/
    background: #000;
    color: white;
    border: 2px solid white;
    transition: ease 0.5s !important;
}