Buttons in web export

hi,

I’ve got 2 issues. Both are with trying to create a button when exporting adobe xd to html and css.

  1. Whenever i set a hyperlink to a rectangle, the clickable area is way to big. Even below the button i’m able to press which is not exactly what i’d need. If i try to put the hyperlink only on the text inside the button, i can only click on the text which makes the area to small.

  2. The second one is quite hard to explain. Basically, when i add a hover effect on the rectangle of my button, the text is in the way. The hover works perfectly fine, but when hovering over the text, which is in the button, the hover doesn’t get triggered. Is there a way to trigger the hover of the rectangle when hovering over the text, or creating some kind of ignore when hovering over the text, so it triggers the hover of the rectangle?

Any help is much appreciated!

Thanks in advance,
Léon

1 Like

Hi Léon,

Welcome to the forums!

To prevent the text from capturing mouse or selection events you can use one or both of the CSS styles:

  • user-select
  • pointer-events

In the Styles field add:

user-select: none;

and

pointer-events: none;

When you add a hyperlink to a rectangle it should be the same size as what is visible. Can you check the overflow value? Can you set that to clip? You can see the boundary of an element by using the Outline option. These options are in the Element Options panel.

FYI There is a new more direct option for creating buttons.

Basically, you do the following:

  • create two button states, normal and hover
  • group them together
  • open the macros list and run the macro “Show hover state as second item in group”

This adds the CSS to the group that shows a hover state.

For adding an active state use the, “Show hover and active state in group”

#rollover #mouseover #mousedown

Hi,

Thank you so much for your detailed answer!
Unfortunutly i’m unable to find any of the settings you mentioned about the overflow value or outline option. Here two screenshots of the element options panel:

Any idea how that’s possible?

UPDATE: I got everything working with the hover effect, but the clickable area is still bigger than the rectangle itself, while the hover only gets triggered when i’m in fact in the rectangle. Any idea how this is possible?

The preferred way to update the options is to use the Element Options rather than the Element dialog. The dialog will be deprecated sometime soon.

The outline option is now a toggle button:

Enable that and then view the element in the browser.

Then set the overflow option to Hidden on the group:

For making the text field not clickable update the styles field like so:

If you can add a screenshot of the element that has the large hit area.

Or if you can add the steps to reproduce so I can test it here.