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?