Style fields for psuedo classes are not working

[fordburgess]

Hello, I have a problem that should be pretty simple to fix, hopefully. I am trying to implement a style field that allows the user to change the color of a button when the button is hovered over. Here is my component: 

<button 
  class="my-button" 
  style="
  background-color: {{ module.style.button_color.color}}; 
  color: {{ module.style.button_text_color.color }}; 
  border: solid 2px {{ module.style.button_border_color.color }};
  position: absolute;
  bottom: 15%;
  padding: 15px;
  {{ module.style.button_alignment }}: 10%;
 "
 href="{{ module.button_url.href }}">
 {{ module.button_text }}
</button> 

and here is my css: 

.my-button {
  transition: 0.3s; 
 }
  
.my-button:hover {
  cursor: pointer;
  background-color: {{ module.style.button_hover_color.color }}; 
}

It's worth noting that the 'cursor: pointer' property does work, but nothing related to colors seem to work; it doesn't even work when I try to set the color statically. I have tried what was suggested on this similar post to no avail: https://community.hubspot.com/t5/CMS-Development/Using-Field-to-specifiy-CSS-attributes-for-Pseudo-c... 

Any help would be appreciated, thank you in advance.

[GRajput · Accepted solution]

Hi @fordburgess 

It looks like you need to add your CSS to the html.module between these tags -

{% require_css %}
<style>
...
</style>
{% end_require_css %}

Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!

[miljkovicmisa]

Hello @fordburgess and welcome to the forum.

As the documentation states in the "Coding custom modules" articles from the css section, the .css file in the module has limited access to hubl templating, thus it is not possible to access the style variable from within it.

The solution to this restriction is to use the "{% require_css %}" function in  the .html tab of the module in order to generate the styles needed.

So in your example, in the html tab, where you have the button tag, you should add the style tag like the following:

<button 
  class="my-button" 
  style="
  background-color: {{ module.style.button_color.color}}; 
  color: {{ module.style.button_text_color.color }}; 
  border: solid 2px {{ module.style.button_border_color.color }};
  position: absolute;
  bottom: 15%;
  padding: 15px;
  {{ module.style.button_alignment }}: 10%;
 "
 href="{{ module.button_url.href }}">
 {{ module.button_text }}
</button>

{% require_css %}
  <style>
    .my-button {
      transition: 0.3s; 
    }
  
    .my-button:hover {
      cursor: pointer;
      background-color: {{ module.style.button_hover_color.color }}; 
    }
  </style>
{% end_require_css %}

 
Also the {{ module.style.button_hover_color.color }} will produce a valid css color like this (#fdfdfd) so no need for further tinkering.

If my answer was helpful please mark it as a solution.

[fordburgess]

Hello and thank you for your answer! I have implemented the changes you suggested, but unfortunately the button refuses to change color. I do not have any styling for the button in the css file of the module, or anything else that would override the styling I have. Here is what I have currently: 

 <a
  class="my-button" 
    style="
    background-color: {{ module.style.button_color.color}}; 
    color: {{ module.style.button_text_color.color }}; 
    border: solid 2px {{ module.style.button_border_color.color }};
    position: absolute;
    bottom: 15%;
    padding: 15px;
    {{ module.style.button_alignment }}: 10%;
  "
  href="{{ module.button_url.href }}">
  {{ module.button_text }}
 </a>    
{% require_css %}
  <style>              
    .my-button {
      transition: 0.3s; 
    }

    .my-button:hover {
      cursor: pointer;
      background-color: {{ module.style.button_hover_color.color }}; 
     }
  </style>
{% end_require_css %}

Again, thank you for your help.

[miljkovicmisa]

Hello again @fordburgess , at this point the best thing would be if you could produce a public page where we can see the button. The css seems to be correct, maybe you could use developer tools, to inspect the element and see what happens on hover state...or maybe even check if some other styles are creating a conflict... also check for the "background" rule, as it tends to override the "background-color".

[miljkovicmisa]

Also, i just noticed that all the rules are inline, you could and should move them in the .my-button class.

Also not sure it does but inline background-color could be the culprit here? Inline styles always have a greater hierarchy.

[Jaycee_Lewis]

Hey, @fordburgess 👋 Thanks for your question! I'm not a CSS wizard, but I know a few — hey @alyssamwilie @miljkovicmisa @Jnix284, do you have any tips for @fordburgess?

I wonder if this is due to Inline styles generally having higher specificity than external CSS styles. Have you tried using external CSS for all hover-related styles? 

Best,

Jaycee

[Jnix284]

Thanks for the tag @Jaycee_Lewis, if this is inline, then you're correct, pseudo classes can't be used inline (regardless of their level in the cascading hierarchy).

@fordburgess when you say "allow the user to change the color", where are you coding this button?

Are you wanting the web user to change it in your theme settings so they can control the colors, or are you just saying you want the color to change when the user scrolls?

A little more context about what you're trying to achieve would be helpful.

[fordburgess]

Hello Jennifer, thank you for your answer. To answer your question, this button is apart of a reusable module. My boss wants to have complete control over the styling (mainly the colors) of all the components in this module. Thus, I have created a style field for for everything, including the button hover color, so that when he is on the page editor creating his pages and he uses this module, he is able to change the color of the button, the border color, the hover color, etc.