How do I create a simple hover effect on a button?

Now this might sound like a silly question, and I’ve spent 20 minutes looking for tutorials, and I’ve searched the community briefly here, but can’t find an answer to it.

How do I create a button which has a simple hover effect? Do I really have to create an artboard overlay? Is that the only way?

Thanks in advance!

Hi @EddieRich thanks for your question :slight_smile:

As you say, the best way to create a hover a button effect at the moment is to use the overlay prototyping feature.

Each state of a button (hover, focus,…) is created as a board. So the prototyping and the layout are more intuitive.

We are working to make this whole process easier using components. This enhancement will give the user many more options.

slide-overlays

1 Like

Hi Juan, thanks for getting back to me. This is quite cumbersome, and really isn’t “intuitive”, in fact it’s quite fiddly. I’m a little disappointed such an obvious task isn’t easier. However, we’ll continue to assess PenPot for a while and see how we get on.

Thanks for getting back to me.

2 Likes

Hi Eddie,

I agree that this is far from ideal for such a common use case. In fact, this “relative to” option for the overlay was a quick solution while we work in a more convenient one. We are currently exploring how to manage element states/variants/mutations (is still in early definition and we hadn’t decided how to name it) as one of our main priorities for this year.

Thank you very much for such honest feedback, we’d love to hear more about your experience assessing Penpot.

1 Like

I was just typing up a query about this and saw this post. Since making buttons and how they work is quite a vital part of UI design.

Has there been any progress or news on this @myfunnyandy ?

1 Like

I also bumped into this limitation while evaluating Penpot for UX prototyping. Penpot seems quite promising, but lack of basic features like this is a big minus.

Could you please share an update on this @myfunnyandy ?

@Sulcalibur @jaritheman we have no tangible updates so far to easily solve things like the hover state because those are in the critical path for improving the current component states management and due to our plans we need to finish some things first. We will release soon significant improvements like the rework of the whole components system (including swapping instances) and we are already working on our approach for variants/variables/mutable components that will provide us the base for better interaction states.

When I saw the preview of different states of components with the swapping instances I thought that the problem was in the realms of a solution. From that reply you just added @myfunnyandy it sounds like a solution is not in the pipeline for a release soon. :frowning: