Donate Reveal Button Styling

  • Resolved panto

    (@panto)


    4 years, 10 months ago

    Hi guys

    I have the Donate Reveal settings working well. Just would like to style the buttons separately as per this screen grab:

    https://ibb.co/PFwrtLf

    1. CSS to target the row of $ Buttons with their own background color and hover state,

    2. CSS to target the Donate Now Button with its own background color and hover state.

    Is this possible?

    Thank you ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Ben Meredith

    (@benmeredithgmailcom)

    Hi @panto!

    Yes, here’s a quick screencast showing that:

    https://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 4 years, 10 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
    }

    Plugin Contributor Ben Meredith

    (@benmeredithgmailcom)

    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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Donate Reveal Button Styling’ is closed to new replies.