Change button background colour

Next-Gen
1

I am attempting to change the colour of a delete button on the checkout page of my online store.

Checkout Button
Checkout Button2238×388 85.5 KB

I want the “Delete this Order” button to be in red (as is), but the “Confirm and Pay” button should be blue.

I am using this CSS script:

#scene_156 .kn-action-button {

background-color: #e74c3c;

font-weight: bold;

}

However, this script changes the colour of both buttons. Obviously, I need more specificity to change the colour of only the one button. I’ve gone into the inspector on my browser, but don’t see anything that resembles an identifier for the various buttons.

Any help much appreciated.

2

You can target only the “Confirm and Pay” button by using a more specific selector, since both buttons share the same class.

Try this:

css

Copy code

/* Delete button stays red */
#scene_156 .kn-action-button {
background-color: #e74c3c;
font-weight: bold;
}

/* Confirm and Pay button turns blue */
#scene_156 .kn-action-button:nth-of-type(2) {
background-color: #007bff !important;
}

If the button isn’t always the second one, inspect if it has a unique attribute like data-id, then target it using that selector.

Let me know if you’d like help identifying it — happy to assist.

I recently worked on Whippedcreamgas..co.uk a similar feature in a project related to cream gas products, so happy to help if you need more selectors.

3

Hi @houwtama, I believe the Knack team still need to add individual button styling to the Next-Gen Builder, but for the interim, you can target these buttons by the icons that they contain, using this CSS:

Change view_1 to your details view, and change the fa-eraser and fa-dollar-sign to the icons that you’re using:

#view_1 a:has(.fa-eraser) {
  background-color: #ff0000; /* Red */
  color: #fff;
}

#view_1 a:has(.fa-dollar-sign) {
  background-color: #00ff00; /* Green */
}

Here’s the result:

image
image584×158 6.66 KB

Hope that helps!

4

Many thanks all for your help. I have attempted both solutions without success. The problem may lie in the “global” CSS I have for all the buttons…

CSS Button
CSS Button716×904 136 KB

:man_facepalming:

5

@houwtama Yes it’s likely your kn-page .kn-action-button selector is overriding the ones above.

Try adding !important after the following:

#view_280 a:has(.fa-eraser) {
  background-color: #ff0000 !important;
  color: #fff !important;
}

#view_280 a:has(.fa-dollar-sign) {
  background-color: #00ff00 !important;
  color: #000 !important;
}

This should take priority over the global button styling.

6

@StephenChapman many thanks for persevering Stephen.

I tried the new script, to no avail. I then removed the “global” script and things reverted to the vinalla state i.e. erase button red and the action “confirm and pay” button reverted to no colour.

Replaced the “global” script and both buttons turned blue.

:thinking:

7

@houtama and I solved this separately.

The a should have been .kn-button because we were dealing with delete and actions buttons, not just links to other pages.

i.e.

#view_280 .kn-button:has(.fa-eraser) {
  background-color: #ff0000 !important;
  color: #fff !important;
}

#view_280 .kn-button:has(.fa-dollar-sign) {
  background-color: #00ff00 !important;
  color: #000 !important;
}