▼
Streaming live at 10am (PST)

Creating hover-on elements that can be used as buttons

Design help Animations & Interactions
#1

Hi guys,
I’m trying to create a grid of buttons that will show a “read more” line beneath them when hovered on. These “read more” elements should be clickable, to open up a text module over the site.
I have a “dumb” version of it working, but built it pretty awkwardly and so the responsiveness to hover on is not so great. Below that, I’ve tried building the same thing with tabs, but I cant figure out how can I make a tab close up (for instance with a second click on the title).

Can anyone help me build this the right way? Thanks in advance!

Here is my public share link: http://test-9e8be3.webflow.io/
(how to access public share link)

#2

Hello, @Tal_Mohr

Let me know if I understood you correct. You want that “read more” open the pop up (modal) window with some content (text) inside it? Then, I am not sure why would you use tabs :confused:

Regards,
Anna

#3

Hi Anna,
Sorry it took me a while to respond! I was abroad with no laptop…
You are correct, and as I have mentioned - I am really not sure how should I build this, so I tried one quirky option, which does not flow well, and so I tried one tabs option. If you have another option that would be smarter than those two - I’d love to hear!

I don’t know if you’ve tried the link, but you can see the top rows of buttons I’m talking about (in the services section) have the functionality I’m looking for but they’re very clumsy.

Just to make things clear, I’ll detail what I need once more, with steps:

  1. Buttons for each service, showing just the title (for instance, “board meetings”)
  2. Upon hover, a little line that says “read more” drops down slightly below the aforementioned button.
  3. The “read more” should be clickable, and link to opening a pop up modal that has text in it (different text for each button).

I think an ideal solution would be to figure out how to improve on the first option. Any insights?

Thanks again!

#4

Hi, @Tal_Mohr

You are right, it is better to stick with the 1st option.

Could you please share your read-only link?
It will help to figure out how to make the hover interaction more responsive.

#5

Hi,
I managed to work it out! There was a hover state getting in the way.

BTW, I find that even though I have transitions to the hover state of one of my buttons, they don’t appear in the actual website. Could it be that the fact that I have an interaction linked to that button, is somehow overriding its hover state?

Here’s my read only link:
http://test-9e8be3.webflow.io/

The button I’m talking about is the “learn more” button in the international section (a parallax beneath the services grid).

Thanks again!

#6

Hi, @Tal_Mohr

Glad to hear you figured it out :slight_smile:

Once I had an issue with using hover state CSS and interaction with hover trigger set to the same element. It was a bit glitchy. :confused:

Cheers,
Anna

#7

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