Question

CSS doesnt work for Submit Buttons

  • 22 January 2023
  • 1 reply
  • 48 views

Badge

CSS works on all the buttons except for Next or Submit . Mainly the color gets green when we hover. This doesn't for Next or Submit. Tried all the possible options. It works for secondary buttons but not for Next or Submit

 

 

CSS =>

[dir] .nx-theme-styles .nx-theme-form .nx-theme-button-1

{ background-color: #FFFFFF;

color: #00763c;

font-size: 16px;

font-weight: 700; width: 100%;

border: 2px solid #00763c; }

[dir] .nx-theme-styles .nx-theme-form .nx-theme-button-1 .hoover

{ background-color : #00763c; }

[dir] .nx-theme-styles .nx-theme-form .nx-theme-button-2

{ background-color: #FFFFFF; color: #00763c; font-size: 16px; font-weight: 700; width: 100%; border: 2px solid #00763c; }

[dir] .nx-theme-styles .nx-theme-form .nx-theme-button-2 .hoover

{ background-color : #00763c; } [dir] .nx-theme-styles .nx-theme-form .nx-theme-label-1 .a { color: #00763c; }


1 reply

Badge +1

Greetings @sandhyak ,

I guess there is a typo for the hover state in the CSS, it should be `nx-theme-button-2:hover` instead of ` .nx-theme-button-2 .hoover`.  In your case we just need to increase the CSS selector specificity  as mentioned in our CSS guideline, this article is referenced in the guideline and it explain how CSS selector specificity works in details.

With that in mind, I would suggest the following CSS:

[dir] .nx-theme-styles .nx-theme-form .nx-button-container button.nx-theme-button-1 { 
background-color: #FFFFFF;
color: #00763c;
font-size: 16px;
font-weight: 700; width: 100%;
border: 2px solid #00763c;
}

[dir] .nx-theme-styles .nx-theme-form .nx-button-container button.nx-theme-button-1:hover {
background-color : #00763c;
color: #ffffff;
}

[dir] .nx-theme-styles .nx-theme-form .nx-theme-button-2 {
background-color: #FFFFFF;
color: #00763c;
font-size: 16px;
font-weight: 700;
width: 100%;
border: 2px solid #00763c;
}

[dir] .nx-theme-styles .nx-theme-form .nx-button-container button.nx-theme-button-2:hover {
background-color : #00763c;
color: #ffffff;
}

[dir] .nx-theme-styles .nx-theme-form .nx-theme-label-1 .a {
color: #00763c;
}

I assume that we want to change the button text color to white or any light color to have a good contrast with the green color when the button is on hover.

Let me know if the above CSS works. Thank you.

Reply