Add cta button at the bottom of page


#1

hi team,

I would like to add a button to the bottom right corner of my site similar to the attached photos, is there any way to achieve this?

desktop view:

mobile view:

thank you!


#2

Hello there,

Firstly add this PHP snippet to your child theme’s functions. Or use a plugin that allows function addition to WordPress site like Functionality.

    add_action('sydney_after_footer', 'sydney_child_add_floating_cta');
    function sydney_child_add_floating_cta() {
      ?>
      <div class="sp-floating-cta">
        <a href="#" class="roll-button border text-white">Log in / Sign Up</a>
      </div>
      <?php
    }

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .sp-floating-cta {
      display: table;
      position: fixed;
      bottom: 0;
      right: 0;
    }

    .sp-floating-cta a.roll-button {
      border-color: #000;
      background-color: #000;
    }

    @media only screen and (max-width: 1024px) {
      .site-footer {
        padding-bottom: 50px !important;
      }
      .sp-floating-cta {
        display: block;
        width: 100%;
      }
      .sp-floating-cta a.roll-button {
        display: block;
        text-align: center;
      }
    }

Regards,
Kharis


#3

Hi Kharis,

I did everything you said and it didn’t work.
Here is a link to my site.

Thanks


#4

Hello there,

It seems like the Functionality plugin doesn’t load the code I suggested. Probably you’d try the Code Snippets plugin.

Regards,
Kharis


#5

The Code Snippets plugin worked perfectly!
Thank you Kharis :slight_smile:
Is there any way to make the button square instead of the round corners?


Remove default scroll up button
#6

Great!

To remove the rounded effect, add this CSS code:

.sp-floating-cta a.roll-button {
  border-radius: 0;
}

Regards,
Kharis


#7

It looks great! thank you Kharis :slight_smile: