How to Change the Altru “Continue to Shop” Button Color With CSS

The “Continue to Shop” button on an Altru online sales page usually ships in whatever default color the form template uses. On a branded website it ends up looking a little off. Changing it is a small CSS job, and the hard part is finding the right selector, not writing the rule.

Below is the approach we use: find the button’s actual class or ID in the browser, write a narrow rule, add it wherever your Altru web form setup accepts custom CSS, and then test it properly. We won’t give you a copy-paste selector, because the markup can differ between form types and can change when Blackbaud updates the forms. Ten minutes in your browser’s developer tools will get you a rule that actually matches your page.

Step 1: Find the button’s selector

1. Open your live Altru sales page in Chrome, Edge, Firefox, or Safari, and get to the point where “Continue to Shop” shows up (usually after something is in the cart).
2. Right-click the button and choose Inspect. The developer tools open with the button’s HTML highlighted.
3. Note what the element is (a <button>, an <input type="submit">, or an <a> styled as a button) and any id or class values on it.
4. Look at the Styles panel on the right. It shows which existing rule sets the current background color. Your rule needs to be at least as specific as that one.

An ID is the best target if the button has a stable one, since it affects only that button. If the button shares a generic class with every other button on the form (Add to Cart, Checkout, and so on), changing that class recolors all of them. Sometimes that’s what you want for consistency. If it isn’t, scope the rule with a parent container or an attribute that’s unique to this button.

Step 2: Write a narrow rule

Here is the general shape. Replace #your-button-id with the selector you found.

#your-button-id {
  background-color: #1f5c4a;
  border-color: #1f5c4a;
  color: #ffffff;
}

#your-button-id:hover,
#your-button-id:focus {
  background-color: #164638;
  border-color: #164638;
  color: #ffffff;
}

A few details that save time:

• Set the border and text color too. Many default button styles have a colored border that stays visible around your new background.
• Style hover and focus states. If you skip them, the button may jump back to the default color when someone points at it or tabs to it.
• Watch for background images or gradients. If the existing style uses background-image or a gradient, setting background-color alone won’t show. Add background-image: none;.
• Use !important only as a last resort. If your rule still loses after you’ve matched the specificity, adding it to the color properties will usually win. Keep it to this one rule so it doesn’t make later changes harder.
• Check contrast. Your brand color with white text has to stay readable. Run the pair through any WCAG contrast checker. A pale brand color on a call-to-action button is a common accessibility miss.

Step 3: Put the CSS where Altru will load it

Altru web forms let you apply custom styling, but where that option lives and which pages it covers depends on the form type and your Altru version. In some setups the cart and checkout pages pick up a shared stylesheet. In others each form is styled separately. If you can’t find a custom CSS field that covers the page with this button, ask Blackbaud support where styling for that specific page belongs, rather than guessing.

Before you save, you can try the rule live: in the developer tools Styles panel, add it to the element and confirm the color changes. Then copy the working version into Altru.

Step 4: Test it like a guest would

• Load the page in a private window so you aren’t looking at a cached stylesheet.
• Check it on a phone. Some form templates switch styles at smaller widths, and a rule that works on desktop can lose on mobile.
• Click through the whole purchase path and make sure you didn’t accidentally recolor other buttons.
• Tab to the button with the keyboard and confirm the focus state is visible.

Write down the selector and where you saved the CSS. After an Altru update, if the button snaps back to the default color, the markup probably changed. Repeat Step 1 and update the selector.

When button CSS isn’t enough

Recoloring one button is quick. Getting the whole purchase flow to match your site through CSS overrides is slower, because every update can break a selector and you’re limited to the structure the form gives you. Some teams decide to stop restyling the stock forms. Social Good Checkouts replaces Altru webforms with a branded, mobile-friendly checkout for tickets, memberships, and donations, supports Apple Pay and Google Pay, and writes the data back to Altru.

Quick answers

Why didn’t my CSS change anything?
Usually the selector doesn’t match, or a more specific existing rule wins. Inspect the button again, compare your rule against the one shown in the Styles panel, and check that your CSS is actually loading on that page.

Can I change the button text as well as the color?
CSS can’t reliably change button wording. Check whether your form settings let you edit the label, and if they don’t, confirm with Blackbaud support before trying workarounds.