How to Create a Floating Buy Now Button to Increase Sales

As a webdesign/product business, we put a lot of thought into our buttons. Why is that? Calls to action aren’t just important for business, they drive everything including lead and revenue generation, better click-through rates, superior user experience and more – customers want and expect them.

In this tutorial I will show you how to create a highly converting, site-wide floating button for any Divi powered website.

Let’s get started!

 

How to Create a Good Call-to-Action Button?

 

1. Make your Call-to-Action buttons look like buttons

Remember that you want users to take an action, which they’re only going to do if it’s clear what that action is. We don’t push diagonal bits of text, or weird bouncing icons: We push buttons.

2. Ensure your CTA button stands out

A general rule to follow is that your button stands out from the rest of the page design, you can achieve this in a number of ways but some of the most common approaches include bolder text, increased padding and white space, different or larger fonts and in some cases a background color that is reserved only for CTAs.

3. Write copy that encourages action

Particularly in the case of sales/product pages, your content should build up to the user taking an action. By the time they finish reading, users should know exactly what you want them to do and should be actively seeking out the next action.

4. Choose a bold colour for your buttons

Again, it all comes back to making sure they stand out. A good test is to scroll quickly through your content, did your buttons still catch your eye?

5. Ensure you have good contrast between text and button colour

Whether it be dark on light or light on dark, ensure your text is not washed out. Bear in mind that people see colors differently where as contrast is relatively consistent.

6. Make your buttons mobile and desktop optimised

This isn’t a principle reserved for buttons, but there is a lot more to lose from poorly optimised call-to-actions. Check that longer words aren’t being cut in half and placed on two lines and consider making your buttons span the entire view-port when your content is showing in a single column, on mobile for instance.

7. Put your first Call-to-Action button above the fold

in the case of ‘buy now’ buttons, consider that your user has already landed on the page with the intent of taking the next action. Don’t make them work for it.

 

 

 

  • Google+
  • Facebook
  • Twitter

Did you know that...

More than 90% of visitors who read your headline also read your CTA copy.

Why Do I Want to Create a Floating Button? 

Consider this: A customer is shopping on your client’s page and scrolling through a product description. The customer is getting excited to buy the product, but they don’t see a ‘buy now’ button. The first CTA has been scrolled past and it’s a while before the next one comes into view, so the customer leaves. It happens.

With a floating button, your call to action is always visible to a website visitor. The button floats in a set position to follow the visitor’s activity, moving up or down the page as they scroll, so at they point they make a decision to take an action, they’re able to.

The type of button you choose to use is subjective and should be tweaked and informed by how successful it is. What works for other people may not work for you. Successful CTAs require a ton of experimentation, A/B testing, and a willingness to keep trying new things, even when you’re getting “good” results.

Good can always be great, with work.

How to Add Sticky Button Site-Wide

 

Step 1.

  1. In the back end of your site, go to “Divi > Theme Options”, where you will find the Divi theme options.
  2. Open the “General” tab (it should be the current one).
  3. Scroll down to the bottom of the tab.
  4. There you will find a box named “Custom CSS”.
  5. Paste the CSS code below into the box after anything else that may already be in there.
  6. Press “Save”.
  • Google+
  • Facebook
  • Twitter

.sticky-divi-button {
color: #ffffff; /* You can change font color */
font-family: "Raleway";
font-size: 18px/* You can change font size */
background-color: #f5a623; /* You can change color button */
border-radius: 4px;
Letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0px 25px 28px -21px rgba(194,180,190,1);

padding: 20px 3%;
z-index: 10;

position: fixed;
bottom: 40px;
right: 40px;
}

.sticky-divi-button:hover {
background-color: #3ccee2; /* You can change color button on hover */
box-shadow: none;
}

Step 2.

  1. Go to “Divi > Theme Options”, where you will find the Divi theme options.
  2. Go to the “Integration” tab.
  3. There you will find a box named “<body>”.
  4. Paste the code below, into the box. Again, after anything else that’s in there.
  5.  Replace # with your link.
  6. Press “Save”.
  • Google+
  • Facebook
  • Twitter

<a href=”#” class=”sticky-divi-button“>Buy now</a>

Do you want to add a button to single page?.

Add the code to a Divi Code Module, instead of into theoption.

1. Create a A ROW, add code “z-index:10;” to the custom CSS tab
2. Create Code Module in the row and insert the code “<a href=”#” class=”sticky-divi-button”>Buy now</a>”

  • Google+
  • Facebook
  • Twitter

There you have it, with just two chunks of relatively simple code you have a sticky button! If you have any questions or suggestions, make sure you leave a comment in the comment section below 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.

Previous post
Next post

45 Comments

  1. Jennifer Richards

    This is great. Thanks so much for sharing.

    Is there a way to have a side floating button on desktop and tablet and a bottom floating one on mobile?

    Reply
    • Anna Kurowska

      Of course, change CSS to:

      .sticky-divi-button {
      color: #ffffff; /* You can change font color */
      font-family: “Raleway”;
      font-size: 18px; /* You can change font size */
      background-color: #f5a623; /* You can change color button */
      border-radius: 4px;
      Letter-spacing: 0.8px;
      text-transform: uppercase;
      text-decoration: none;
      box-shadow: 0px 25px 28px -21px rgba(194,180,190,1);
      padding: 20px 3%;
      z-index: 10;
      }

      .sticky-divi-button:hover {
      background-color: #3ccee2; /* You can change color button on hover */
      box-shadow: none;
      }

      @media all and (max-width: 767px) {
      .sticky-divi-button {
      position: fixed;
      bottom: 40px;
      right: 40px;
      }
      }

      @media all and (min-width: 768px) {
      .sticky-divi-button {
      position: fixed;
      bottom: 40%;
      right: -4%;
      transform: rotate(90deg);
      }
      }

    • Benjamin

      Hello, you are a genius, sorry and could you tell me what to add so that this button is on top of my web menu?

  2. Dean

    Good article.
    Thanks for the ease of use for it

    Reply
  3. Chris

    I got it working but have trouble with the stacking. It gets lost behind some things and others only part will serve as the link. I tried increasing Z-index to 99 but it made no difference. I love the idea if I can work out the “always on top” issue. I have it on my homepage now.

    Any ideas?

    Reply
    • Anna Kurowska

      Can you please send me a link to the website?

  4. bruno

    Thank you for this interesting tutorial

    Reply
  5. Nudge

    Awesome, works well.

    Reply
  6. Chris

    I can’t get it to stack properly. Anna, I didn’t know how to reach you but the button is on the home page of TeachU.com

    Reply
    • Anna Kurowska

      Chris, a row with Divi Code Module needs to have z-index:10; property

    • Chris Reich

      Brilliant! Thank you. I tried putting that on the code module but it didn’t work. It did work great when adding it to the row as you instructed. Thank you so much!

  7. Leon

    Is it possible to have the text colour also change when hovering?

    Reply
    • Anna Kurowska

      Sure!

      .sticky-divi-button:hover {
      color: #ffffff; /* Buttom text color on hover */
      }

  8. Leon

    Also is it possible to only have the button appear on certain pages as it appears on the page they are sent to when they click the button and that doesn’t make sense.

    Reply
  9. Noel

    Is there some sort of code I can add to have the button NOT show on specific pages?

    Reply
    • Anna Kurowska

      Yes, you can use page and post id to make the floating button not show up on certain pages.

      For posts:
      .postid-XXXX .sticky-divi-button {
      display: none;
      }

      For pages:
      .page-id-XXXX .sticky-divi-button {
      display: none;
      }

  10. Andrew Bucchin

    How can I change when the button appears or whether its just mobile?

    Reply
  11. Leon

    How can I stop the button showing on some pages?

    Reply
  12. John

    How do I make the floating button not show up on certain pages?

    Reply
  13. Anna Kurowska

    Yes, you can use page and post id to make the floating button not show up on certain pages.

    For posts:
    .postid-XXXX .sticky-divi-button {
    display: none;
    }

    For pages:
    .page-id-XXXX .sticky-divi-button {
    display: none;
    }

    How to find the page ID?
    1. Go to the Pages list inside your dashboard.
    2. Edit the page you want to work with.
    3. Look at the URL in your browser’s address bar and find the section that looks like this: “post=[ID-NUMBER]“.
    6. That number will compose your class, that should look like this: “.page-id-[ID-NUMBER]“.

    Follow the same steps for posts, You can also inspect your page and find css class inside body,

    Reply
    • Jacqueline Gikow

      Is there a bulk way to get rid of the floating button on each post without individually adding the post id for every one?

    • Anna Kurowska

      yes, you can use class .single-post

  14. Jacqueline Gikow

    How can I make the button smaller?

    Reply
    • Anna Kurowska

      @media all and (max-width: 768px) {
      .sticky-divi-button {
      padding: 10px 15px; /*smaller button on mobile */
      font-size: 15px;/*smaller button on mobile*/
      }
      }

  15. Jacqueline Gikow

    How do I center the button on a mobile phone?

    Reply
    • Anna Kurowska

      @media all and (max-width: 768px) {
      .sticky-divi-button {
      bottom:10px; /*center button on mobile*/
      left: 46.5%; /*center button on mobile*/
      width: 7%; /*center button on mobile*/
      }
      }

  16. chris

    Epic – thank you!

    Reply
  17. CHris

    HAD A STACKING ISSUE, TOO
    Anna solved it

    1. Create a A ROW with z-index:10; in CSS tab
    2. Insert Code Module in there
    3. Insert Code provided in this blog post in Code Module
    4. Done 🙂

    Reply
    • Anna Kurowska

      Thank you Chris! I updated post to include that information.

    • Pierre

      Hi,
      I don’t understand this. Could you please explain?
      Thanks!

  18. Stan van der Elst

    Is is possible to add a icon on the right side of the button?

    Best regards,

    Stan

    Reply
    • Anna Kurowska

      Yes 🙂 Add CSS:

      .sticky-divi-button::after {
      font-family: ETmodules;
      content: “\35”;
      padding-left: 10px;
      }

      to display on the left side

      .sticky-divi-button::before {
      font-family: ETmodules;
      content: “\35”;
      padding-right: 10px;
      }

      Unicode Reference Guide
      https://www.elegantthemes.com/blog/resources/elegant-icon-font

  19. Marty Rogers

    This is exactly what we were looking for, cheers Stephen!

    Reply
  20. Lisa

    Awesome!

    Reply
  21. Jennifer

    This is so helpful!

    Is there a way to switch the button off on mobile?

    Reply
  22. josh

    Is it possible to make this button only show once the reader starts to scroll?

    Reply
    • Anna Kurowska

      It’s possible with additional jQuery code.

  23. David

    Can you provide a little more step by step for the “add a button to single page option”

    I created a row and added the Code Module, but there is no “tab” that I could find identified as the “CSS”.
    And once I add the CSS code, where do I put the html code.

    1. Create a A ROW with z-index:10; in CSS tab
    2. Insert Code Module in there
    3. Insert Code

    I tried many different options with no success.

    Thanks for any help for us newbies.

    Reply
  24. Chantelle

    I added the code and the button does not appear. My website is theitalianontour . com

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.