XF 2.2 Purchase Button

PASS

Well-known member
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
 
What would be the best way to also change the hover effect as it still is using the original css.

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;
}
 
This is easiest.

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

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