EuiButton has underline text decoration when hovered

[jeepers3327]

I don't want to create an issue regarding this one but since I cannot create a question in Discussions part, I created the ticket, my apologies.

When visiting ElasticUI docs page and go over Button component, I noticed that when button is hovered, a text-decoration: underline style is set. This is also visible on Cards component.

My questions are:

• Is it the default behavior of buttons even though they are not intended to used as link
• Is there a quicker way to disable this behavior

I currently use this solution which overrides the current styling of the button

.euiButton:not([class*="isDisabled"]):focus, 
.euiButton:not([class*="isDisabled"]):focus-within, 
.euiButton:not([class*="isDisabled"]):hover {
  transform: none;
  text-decoration: none;
}

Again, my apologies if this is not the proper channel for my query.

Thank you.

[miukimiu]

Hi @jeepers3327 👋🏽,

I converted your issue into a discussion and I'll try to investigate further why you can't open a discussion in the first place.

Answering your questions:

• Yes, it is the default behavior.
• The only way to disable this behavior is to override the CSS like the way you're doing. But removing both the transform and text-decoration from a design and a11y perspective will make the buttons just rely on the background color to show that they are interactive. If you're using the Amsterdam theme, there's no change in the background color when hovering. So the button won't seem interactive. I would recommend leaving those styles, but it is your decision. 🙂

[jeepers3327]

Okay thanks for confirming it.