Where to add your Custom Code:
Add this CSS code on your offer checkout’s Advanced > Custom CSS section:
STEP 1: Copy the Custom Code below:
.n-button--primary-type {
--n-color: #9a6a71 !important;
--n-color-hover: #6a2921 !important;
--n-color-pressed: #6a2921 !important;
--n-border: 1px solid #6a2921 !important;
--n-border-hover: 1px solid #9a6a71 !important;
background-color: #9a6a71 !important;
}
STEP 2: Add your Colour to the Custom Code
Replace the # codes in bold above with the colour code you wish to use for the button
Note:
Class: .n-button--primary-type Do not change this unless you are targeting a different button.
*This code won’t automatically apply its changes to all your offer checkouts, you still need to manually add them on each offer checkout.
Understanding the Colour Codes:
--n-color: #9a6a71
This is the main colour users see when the button is in its normal state.
--n-color-hover: #6a2921
This is the hover colour.
--n-color-pressed: #6a2921
Changes the button colour when pressed.
--n-border: 1px solid #6a2921
Border color
--n-border-hover: 1px solid #9a6a71
When hovered, the border changes to this lighter shade
background-colour: #9a6a71
Sets the background colour to match the default button colour. This is gonna ensure consistent button colour, even in case of fallback or override issues.