Button Text-Active CSS Class?

Support
#1

Hi, I am trying to style my buttons with CSS classes and believe I have everything working except the text color when the button is active. What class can I target to change this?

Also, you provided a great hint to use Chrome Developer Tools to discover these things, and it is working well for static elements, but I am still struggling to identify things that I can’t right-click on or select with the picker, such as the changing text color when you hover over the button; margins that are dynamic with mobile behavior; etc. Can you point me in the right direction on how to solve these issues myself? Alternately, is there a catalog of classes associated with each of the X-theme elements that we could use to look up various classes?

Thanks!

#2

Hi there,

Here are some of the CSS classes that are using in X. Please note that these are not the complete list of the classes used in X:

As for the element state such as hover, you can actually still use the developer tools.

So please try to use this code:

.x-btn:hover, .button:hover, [type="submit"]:hover {
    /* Add your styles here */
}

Hope this helps.

#3

Hi Jade, and thanks for the reply. Thanks too for the CSS class index. It seemed to be limited to page-level items and did not include any elements, but should be helpful in the future.

Regarding the issue at hand, unfortunately the code you provided did not work. I have all other aspects of the button behavior working by targeting: x-button-text-primary; .x-graphic-icon; x-active (icon hover); and x-interactive (button background hover). To be clear I want to control the color of the text when you hover over the button, not the text itself.

Finally, I had previously tried using Chrome Developer tools with a forced hover state to solve this problem. Perhaps I am not using it correctly, but when I select forced hover and select the button, I only see .x-anchor-content:hover. Targeting this changes the background of the button on hover not the text. I still can’t figure out how to target the text when the button is hovered over.

Thanks!

#4

Hi Ergo,

The provided information is applicable for the generic button especially the classic one. I assume you’re not referring to the v2 button, for that you have to use its own setting area and set the color.

Thanks!

#5

Hi Rad, This is beginning to get a little frustrating. The first sentence of my question above reads: “I am trying to style my buttons with CSS classes.” Could you please help me do this with CSS?

I believe we are using the V2 buttons, although I am not sure how I would know. It just says “Button” and is the 4th item in the element list on my editor.

Thanks!

#6

Hello Ergo,

Do you mean that you want to add custom classes to your button? And then use a custom css class to target the text on hover? Find the “Customize” tab in the button settings. That’s where you can add a custom my-element ID or my-element class and even insert the inline element css.

You can then use this custom css to change the color of the text upon hover.

#my-element:hover .x-anchor-text-primary {
  color: red;
}

or with custom class:

.my-element:hover .x-anchor-text-primary {
  color: red;
}

Hope this helps.

#7

That it! I couldn’t figure out how to target something other than the object that was being hovered.

Thanks!

#8

Hi Ergo,

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

#9

Hi Friech, I was able to find the .x-anchor-text-primary with the inspector, but I wasn’t sure how to target it when the user hovered over the button rather than the text itself. Using .my-element:hover was the key!

Thanks again!

#10

Glad this is now sorted out Ergo.

This CSS element relationship/combinators documentation might help you:
https://www.w3schools.com/css/css_combinators.asp

Cheers!

#11

Thanks! Very helpful!

#12

We are delighted to assist you with this.

Cheers!

#13

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