XF 2.2 Purchase Button

[PASS]

Can someone show me an example of the css I need to add to the extra.less template to only change the color of the Purchase button on the user upgrades page? Thanks

 

[Paul B]

.button--icon--purchase
{
    background: orange;
    border-color: darkorange;
}

 

[PASS]

Thanks!

 

[PASS]

What would be the best way to also change the hover effect as it still is using the original css.

.button:not(.button--splitTrigger):hover, a.button:not(.button--splitTrigger):hover, .button.button--splitTrigger>.button-text:hover, a.button.button--splitTrigger>.button-text:hover, .button.button--splitTrigger>.button-menu:hover, a.button.button--splitTrigger>.button-menu:hover, .button:not(.button--splitTrigger):focus, a.button:not(.button--splitTrigger):focus, .button.button--splitTrigger>.button-text:focus, a.button.button--splitTrigger>.button-text:focus, .button.button--splitTrigger>.button-menu:focus, a.button.button--splitTrigger>.button-menu:focus, .button:not(.button--splitTrigger):active, a.button:not(.button--splitTrigger):active, .button.button--splitTrigger>.button-text:active, a.button.button--splitTrigger>.button-text:active, .button.button--splitTrigger>.button-menu:active, a.button.button--splitTrigger>.button-menu:active {
    background-color: #554343;
}

 

[Paul B]

This is easiest.

.button--icon--purchase
{
    background: orange;
    border-color: darkorange;

    &:hover
    {
        background: green !important;
        border-color: darkgreen;
    }
}

 

[PASS]

Perfect...thanks!