I’ve got 2 issues. Both are with trying to create a button when exporting adobe xd to html and css.
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.
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?
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”
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:
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?
