Hi @panto!
Yes, here’s a quick screencast showing that:
http://somup.com/cYVUlghnGd
Here’s the code that I used:
button.give-donation-level-btn {
color:blue;
background-color:white;
}
button.give-btn.give-btn-reveal {
color:white;
background-color:green;
}
Have a great day!
-
This reply was modified 6 years, 4 months ago by
Ben Meredith. Reason: typo
Thread Starter
panto
(@panto)
Thanks so much Ben!
I also managed to work out a hover color state for both button types as per code below.
For the $ buttons, when user selects a $amount, I would like the green hover state to remain active eg: https://ibb.co/ZBw2kTL
Would you be able to help on that?
Here’s my current code………………
/* Give Donate Amount Buttons */
button.give-donation-level-btn {
color:white;
background-color: #fbac34
}
button.give-donation-level-btn:hover {
background-color: #228AA4
}
/* Give Donate Now Button */
button.give-btn.give-btn-reveal {
color:white;
background-color: #94287b
}
button.give-btn.give-btn-reveal:hover {
background-color: #228AA4
}
Hi there,
When a level is selected, a class of give-default-level is added to it, so if you want both the hover and the selected level to have those attributes, this code will do:
/* Give Donate Amount Buttons */
button.give-donation-level-btn {
color:white;
background-color: #fbac34
}
button.give-donation-level-btn:hover, button.give-default-level {
background-color: #228AA4
}
/* Give Donate Now Button */
button.give-btn.give-btn-reveal {
color:white;
background-color: #94287b
}
button.give-btn.give-btn-reveal:hover {
background-color: #228AA4
}
I took the same code you gave me, and added a second selector to the hover declaration.
For cool things you can do with CSS, I’d recommend checking out css-tricks.com and searching there. They have great free stuff!
Have a great day!
Thread Starter
panto
(@panto)
Thanks so much! Works perfectly.
cheers
