Customize Button & Hover State

[flashden422]

Hello,

I was trying to make a few slight modifications to the medium sized buttons. Could you let me know what code I would need to add in the CSS Stylesheet to customize the buttons so when they are hovered over with the mouse the text inside the button changes colors from black to white AS the button color changes from black to white?

When I was done writing this and went to hit the Submit button on this page I just noticed that basically, aside from the colors, I’d like for the buttons to perform as yours do! : ) Where the light background changes to a darker one, while the text changes from a dark color to a lighter one. (see attached)

In the Buttons Shortcode area, I’ve tried modifying/adding the following code, but it does not work:

– – –

a.sf-button.lightgrey {
/*background-color: #fff;*/
background-color: Transparent;

background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+CjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjdmN2Y3IiBzdG9wLW9wYWNpdHk9IjAiLz4KPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmN2Y3ZjciIHN0b3Atb3BhY2l0eT0iMCIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
background-image: -moz-linear-gradient(90deg, rgba(255,255,255,.15) 0%, rgba(247,247,247,0) 50%, rgba(247,247,247,0) 50.12%);
background-image: -o-linear-gradient(90deg, rgba(255,255,255,.15) 0%, rgba(247,247,247,0) 50%, rgba(247,247,247,0) 50.12%);
background-image: -webkit-linear-gradient(90deg, rgba(255,255,255,.15) 0%, rgba(247,247,247,0) 50%, rgba(247,247,247,0) 50.12%);
background-image: linear-gradient(90deg, rgba(255,255,255,.15) 0%, rgba(247,247,247,0) 50%, rgba(247,247,247,0) 50.12%);

border: #999999;
border-style: solid;
border-width: 1px;
}

}
.sf-button.lightgrey:hover {
background: 000;
border: #999999;
border-style: solid;
border-width: 1px;
color: #fff;
}

– – –

What am I missing? Or is there some other area that needs to be modified as well?

Thank you.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

This CSS added to your theme options should provide you with what you need, please adjust the colors to refine to your needs:

.sf-button.accent {
    background: none;
    background-image: none;
    background-color: #f7f7f7!important;
    border: 2px solid #eee!important;
    color: #ccc!important;
}

a.sf-button.accent:hover {
    border: none!important;
    box-shadow: none!important;
    text-decoration: none!important;
    background-color: red!important;
    border: 2px solid red!important;
}

Cheers,
David.

[flashden422]

Thanks David!

[David Martin – Support]

Glad to help you out!
-David.

[flashden422]

I tried the code above and it’s very helpful. (forgot about !important tags)

But so far no matter how I modify the various HOVER selectors, when I roll over the text it’s black and won’t allow me to designate the text color inside the button to be a different color when hovered over.

I’ve tried:

color: #FFFFFF !important;

and

color: #FFFFFF;

Is there something else I may be missing? Or maybe some other code and/or setting that is interfering?

Thanks David!

[David Martin – Support]

To change the hover colors, you would need this:

.sf-button.accent:hover {
    color: red!important;
}
 
a.sf-button.accent:hover {
    color: red!important;
}

Thanks,
David

[flashden422]

Thanks for your time on this.

The selectors above are not in the current CSS. There are similar selectors (that don’t have “.accent”).

And this is how I currently have them modified, with one’s original attributes completely commented out.

a.sf-button:hover {
/*border: 0!important;
box-shadow:0 2px 3px 0 rgba(0,0,0,.2);
text-decoration: none!important;*/

.sf-button.lightgrey:hover {
/*background: #aaa;*/
background: #fff;

When I add: color: red!important; to both of them it still does not work. The hovered over text continues to remain black.
(lightgrey is the button set that I’m using, and have made modifications to)

a.sf-button:hover {
/*border: 0!important;
box-shadow:0 2px 3px 0 rgba(0,0,0,.2);
text-decoration: none!important;*/
color: red!important;

.sf-button.lightgrey:hover {
/*background: #aaa;*/
background: #fff;
color: red!important;

Or am I supposed to add all of the code you supplied above? I did try this as well and had the same results.

Thanks!

[David Martin – Support]

Hi,

This should be very simple so we must be getting our wires crossed, can you send me the page URL you are doing this for?

Cheers,
David.

[flashden422]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
There are 4 syntax error in css file so i have corrected the code. Now use attached one code. Dont forgot to backup old file.
Thanks
Mohammad

Attachments:

You must be logged in to view attached files.

[flashden422]

Thanks! I’ll give it a try soon! Have a good weekend.

[Mohammad – SUPPORT]

Hi,
You most welcome and let us know your feedback.
Thanks
Mohammad