Button works in Designer but not once published due to Chrome extension

Bit of a weird one here I’m afraid :frowning:

I have a button that I’ve created with an icon that animates in it. This all works fine as you can see in the preview.

However once published it doesn’t show the icon at all. Am I so tired that I’m missing something totally silly here? Please tell me I am :wink:

https://preview.webflow.com/preview/webflow-tests-2?preview=6179eedb39d375edae76ab256d5caa8e

Also I’m just wondering if anyone could take a look at the button and the way I’ve made it in Webflow and let me know if that’s the best way of doing what I’m doing? More specifically what containers I’ve used to make it with and then the animations for the icon image whether there is a better way of going about it all perhaps?

Many thanks in advance for any help with this.

Best wishes,

Mark


Here is my public share link: LINK
(how to access public share link)

Grrrr!!! :angry:

Found out that I couldn’t get any images at all to load on the page so thought there was something severely up with Webflow.

Then I noticed a browser extension had turned on for some reason and was attempting to protect my page by turning all the images off!! Well thank you very much that extension!!! NOT!

Anyway sufficed to say the images are now working and all fine so I guess I’m now just asking if this is the best way to code the button and to go about the animation or is there a better / faster way of doing all of this?

One problem I do have with it though is you’ll see that I’ve tried to round the edges of the button but for some reason I’m getting the border line but still getting the light blue backing coming from somewhere which is overlaying the border line. Not too sure what I’ve done wrong there though?

Many thanks.

Best wishes,

Mark

Hi @Mark_Bowen that looks like odd behavior, from what I see and tested is that you have a “Hidden” overlay style on your Image Button Image class is still rendering in your published site even though you’ve turned it off from what I am seeing in the Read-Only link of your site (you may have published the site since making that update):

I would recommend instead using the background-position effect on hover which @vincent detailed out here:

Hi Waldo,

Many thanks for the reply. Actually the hidden colour I’d just placed on there so that I could see the icon incase it had gone off somewhere on the page as the icon is white I had thought I may have used some weird positioning technique and so it might have been somewhere on the page I couldn’t see :wink: Using that was my way to see if that was what was happening.

As mentioned above (I believe you must have read my post before I’d edited it - sorry about that) the problem of the disappearing image was down to a browser extension being very over-zealous :wink:

The problem I’m having now that the image is showing is that with the button I’ve tried to add rounded corners to it but if you look at the preview link now you’ll see that the line is border line is hidden behind the light blue box colour of which I’m not even sure where that light blue colour is coming from?

Thanks for any help with all of this.

Best wishes,

Mark

P.S. I will definitely take a look at that link to see a better way of doing things although I would love to know where that light blue box colour is coming from and why it’s going over the top of my border line though?

Hi @Mark_Bowen saw that your reply came through with the update on the browser extension causing issue, thank you so much for letting me know!

It looks like you have several elements going into your button right now (which you could simply into one button or link element :slight_smile: ). Here’s a GIF showing where you have a border set on the image button class that is the parent element to your link and image element.

Please let me know if you have any questions :smiley:

Ah crikey!

It was coming from the link text!!

That’s about the one and only thing I didn’t try to change!! :smile:

Thanks for that. Will take a look at the tutorial by Vincent tomorrow now, thanks again.

Best wishes,

Mark

2 Likes

In case anyone reads this thread I believe the title was probably edited by Waldo as that’s not what I had originally written but just to let you know that it was actually a Safari extension and not Chrome.

Best wishes,

Mark

So I’m confused is there actually an issue with site functionality with a Safari extension installed?

Hi jdesign,

Well it all depends on the extension really :wink:

The extension I had loaded was a sort of ad-blocker although I had turned it off it somehow turned itself on again! I’ve always said someday the computers will take over!

Anyway, for me, disabling (well actually, deleting) the extension fixed the problem.

I would just advise that if you have any very weird problems that just don’t seem ‘normal’ that you check these sorts of things first, like I should have done!! :wink:

Best wishes,

Mark

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.