Thrive Architect

SOLVED: Thrive Architect Button Not Showing Pointer Symbol on Hover

People are very used to the general web conventions. For example, logo being on the top left-hand side, menu being on the top right etc.  Similarly, buttons are extremely important components on the web.  The button acts or behaves in such a way implying that it is clickable. For example, a good button changes color when you hover over them, or animate by growing a bit. 

But most importantly a button must show a hand pointer symbol when you hover over it. This clearly shows that the button is clickable. There is a high chance for a user to click on it.

Hand pointer cursor symbol

But if you are a Thrive Architect user, then recently you must have faced an annoying bug with Thrive Architect. When you embed their buttons, you don’t see the usual hand pointer icon like the one above when you hover over it. When after putting in the link the hand pointer does not show up when you hover over the button. Please have a look at the image below to understand the issue.

Thrive Architect button not showing the hand pointer cursor on hover

This is a very serious issue for affiliate marketers, if the users do not see the usual pointer icon on hover, they will assume that the button is not clickable. Hence they will not click on your button (affiliate link), and they will not end up buying your affiliate product.

One of my clients was not happy at all with this issue on his affiliate website. He asked me to solve this as soon as possible. Thankfully I am very good at CSS. I simply pasted in a line of CSS code and it immediately solved the problem. Please have a look at the image below, the button shows hand pointer symbol after I pasted in the CSS code.

Thrive Architect button now showing the hand pointer cursor on hover after adding CSS code.

The CSS Code I added to fix it.

Here is the piece of CSS code I have added to fix the issue. I had to inspect the button element of Thrive Architect, then find the right class to add the CSS.

/*button pointer*/
.tcb-button-link.tcb-plain-text{cursor:pointer;} 

Where to add this code?

You can easily copy and paste this line of code in your Thrive Architect landing page. They have a place where you can add custom CSS codes. After you properly add this line of code the issue will be solved immediately. Simply click on the areas marked with red rectangle. You can click on the image to enlarge.

Final Thoughts

I am quite sure Thrive Themes will solve this “Hand pointer symbol not showing when you hover over Thrive Architect button”. As soon as many people will open a support ticket in Thrive, they will fix this on the next update. 

But until they fix it, you can use the CSS I have provided above to fix this issue right not. If you face any issues, then please feel free to contact me regarding this.

Tasvir Mahmood

Recent Posts

Generate a custom weight loss diet for free using ChatGPT

In our pursuit of a healthier lifestyle, many of us grapple with weight issues. The…

1 year ago

Install WordPress in domain, subdomain or directory using NameCheap Hosting cPanel

If you're seeking an effortless way to set up a WordPress website, look no further.…

1 year ago

How to add subdomain using Namecheap hosting cPanel

In this blog post, we will explore the process of adding a subdomain using Namecheap…

1 year ago

Convert webp format images to png or jpg using GIMP photo editor

Step 1: Introduction A few days ago, I stumbled upon a Facebook post filled with…

1 year ago

Make Elementor inherit theme fonts, colors and settings

In this blog post, we will explore how to ensure consistency in fonts, font sizes,…

1 year ago

WooCommerce Price and Category Product Filter for Elementor Shop Page

In this blog post, we'll delve into the process of adding a product filter in…

1 year ago