Button Text Link colors

[robmcmon]

I want the button text to be white and then dark on hover. I’ve added in some css to do so but the color keeps going dark grey no matter what unless I add in code for the span tag.

Here is what I have

.sf-button large transparent-dark stroke-to-fill btnwhite {
color: #fff;
}
a.sf-button.large.stroke-to-fill {
color: #fff;
}
a.sf-button:hover {
text-decoration: none!important;
color: #666;
}
a.sf-button.transparent-dark span {

}
a.sf-button.transparent-dark span:hover {

}
a.sf-button.transparent-dark {
color: #FFF;
background-color: #12225b;
}
a.sf-button.transparent-dark:hover {
color: #666;
background-color: #FFF;
border: 1px solid #222;
border: 1px solid rgba(34,34,34,.2);
}
a.sf-button:hover, #footer a.sf-button:hover {
color: #666;
background-color: #FFF;
border: 1px solid #222;
border: 1px solid rgba(34,34,34,.2);
}

a.sf-button.transparent-dark {
color: #fff
}

But the button will not go white it starts out as grey no matter what because of this line that is auto generated from the index at line 80:

a.sf-button.transparent-dark {
color: #444444!important;
}

How can I stop this from happening?

Here is a fiddle I setup and it works perfectly fine but inside of your theme it is not working because the auto generated css on the homepage like I said keeps taking it over:

http://jsfiddle.net/robmcmon/4ZWUX/

[Kyle – SUPPORT]

Hi

There’s no need for custom css, use the stroke to fill button type, this will be a white button and will go dark on hover. If there’s ay minor changes you want to make, let me know.

– Kyle

[robmcmon]

I’m setting it up to go from dark to white on hover. not white to dark. That was my whole reason for getting support. Due to the span tag it is not doing a full color change on the text on hover.

[robmcmon]

This reply has been marked as private.

[robmcmon]

You will see when you goto that link that the rollover only completely works if i’m also hovering directly over the span text tag as well as the button.

[robmcmon]

the index is also causing me a problem with the login button to the right. when it goes to hover its going black when its suppose to go white. the only thing i can trace it back to is css code showing up on the index page.

[Kyle – SUPPORT]

Hi

Sorry, but you stated:

I want the button text to be white and then dark on hover

Remove your css for the span, then add this:

.sf-button.transparent-dark.stroke-to-fill span {
  color: #fff;
}
.sf-button.transparent-dark.stroke-to-fill:hover span {
  color: #999;
}

for the submit button you need this:

#submit:hover {
  background-color: #FFFFFF!important;
  border: 1px solid rgba(34, 34, 34, 0.2);
  color: #999;
}

– Kyle

[robmcmon]

Hi Kyle,

Sorry for the confusion. That worked!! However on my forms for those submit buttons I still am having the issue with the hover state going to black because of the theme settings I think. But I’m not sure why. Here is the html code from that submit button:

<input type="submit" id="gform_submit_button_2" class="button gform_button" value="Submit" tabindex="21" onclick="if(window[&quot;gf_submitting_2&quot;]){return false;} window[&quot;gf_submitting_2&quot;]=true; ">

Any thoughts as to why that submit button would still be going to black on hover?

Thank you,

Robert

[robmcmon]

Also could you tell me why your span code worked and mine did not? was it because I did not specify “stroke-to-fill” in the css?

[Mohammad – SUPPORT]

Hi,
Yes , You did not specify “stroke-to-fill” in the css rule .
Thanks 🙂
With Best Regards
Swift Ideas

[robmcmon]

What about the reasoning behind why the submit button is still going to a dark color on hover?

[Mohammad – SUPPORT]

Hi,
Please try to use this css for submit button

#gform_submit_button_2:hover {
  background-color: #FFFFFF!important;
  border: 1px solid rgba(34, 34, 34, 0.2);
  color: #999;
}

Hopefully it should work 100% .

[robmcmon]

That worked. Thank you.

[Mohammad – SUPPORT]

Hi,
You most welcome . I’m glad that issue resolved .
Thanks 🙂
With Best Regards
Swift Ideas