I have two effects on this button. When I click on it, for the hidden question cards to animate out from behind it, and a slight rotation on mouse over.
The problem I’m finding is that the click effect on the button only works when I click on the outer edge of the circle.
The Same goes for the mouse over rotation effect, it only reacts when I hover over the outer edges of the circle.
In my project it is called the “Learn More Button” in my Home Page in the About Me Section.
When I am in the editing dashboard in webflow, I noticed that when I hover over the center of the circle, the mouse turns into an [I] to indicate a text field is there, but there is no text field on the button, I used to have a text box in the button that said “Click here to learn more” but I deleted it because I thought maybe that was the interruption.
Also AFTER the circle has been clicked and the question cards animate out, the rotation on mouse over works smoothly over the whole circle.
Now I’m just confused as to what is causing this problem.
I cant give you a definitive answer as to what is happening but a quick way to fix this is to drag in a link block and give it the same style of the button. You will need to apply the interactions to the new element as well.
For whatever reason, when I move the circle any where but it’s original position (between the 1st and 3rd card, and where the cards animate out from hiding) it works properly from that position, but that kind of ruins the effect of the cards animating out from behind the circle. If you guys have any insight on this, it would be greatly appreciated, if not I can live with it.
Another quick question though, is there a way for the About Me section to adjust it’s height when I click the button and the cards animate out? So it appears that the height adjusts itself automatically based on the new content in the section?
Give the div a background colour (that matches) instead of transparent. This makes it clickable anywhere as there is ‘something’ to click, it shouldn’t matter whether it’s a link block or div block.
Create another interaction on the button and choose to have the About Me Section expand the correct amount when the button is clicked.
Which circle are referring to? Top one or below? And a div vs link block does make a difference, because link blocks allow content inside without if effecting the “Click Range” of the div. Use a reguar div and put text link inside it, if the text link has the interaction, and doesn’t cover the entire div, it won’t be clickable until you mouse directly over the text.
But in your case, I’m not understanding which circle has the issue. And what is wrong with it? When I clicked it, it worked.
