A and a:hover CSS syntax for gradient button

Hi there,

I’ve made a button that has a gradient fill instead of a flat color. However I can’t work out what CSS syntax to change that gradient fill to a different gradient fill on button link hover.

For example, supposing I make a button and give it mybutton as its class name.

.mybutton {
background-color: #52ACFF;
background-image: -webkit-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: -moz-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: -o-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
}

So far so good. Now, I want a new gradient for button hover state.

.mybutton a:hover {
background-color: #08AEEA;
background-image: -webkit-linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
background-image: -moz-linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
background-image: -o-linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
}

I’ve tried mybutton a, mybutton a:hover, and .x-anchor-button.mybutton a:hover without success.

What’s the secret?

Hi Gee,

Thanks for writing in! Try using .mybutton:hover or a.mybutton:hover. You can see further examples from here (https://theme.co/apex/forum/t/customizations-implementing-additional-button-colors/206) to get an idea.

Hope that helps.

Perfect! Exactly what I was looking for. Thank you so much!

Since this strips-out the CSS transition timing between the two states, can you let me know what default settings are used in X, so that I can put them back in again?

Hi again,

To add the transition effect in your code, replace this part of your code:

.mybutton {
background-color: #52ACFF;
background-image: -webkit-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: -moz-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: -o-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
}

With this:

.mybutton {
background-color: #52ACFF;
background-image: -webkit-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: -moz-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: -o-linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
transition: all 0.5s ease-in-out;
}

Hope this helps!

Hmm…that’s not working. Tried clearing cache, etc. but still no joy.

Sorry for the confusion, Gee. The transition property does not currently work for the background-image. Though it’s possible using a hack but please note that this would be outside the scope of our support to implement, fix and enhance. Please see the links below to see some guides on how to achieve what you need.

Hope that helps and thank you for understanding.

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