---
title: Changing button colors to match your brand
description: "HomeRunner buttons use the `hk-button-primary` class, so you can restyle them with your own CSS. **How to change the colors.** In WordPress, go to…"
url: "https://homerunner.io/docs/how-do-i-change-the-homerunner-button-colors-to-match-my-brand/"
updated: "2026-10-26"
category: Theme and design
---

# Changing button colors to match your brand

HomeRunner buttons use the `hk-button-primary` class, so you can restyle them with your own CSS.

**How to change the colors.** In WordPress, go to **Appearance → Customize → Additional CSS** and add CSS like the following. Replace the example colors with your brand palette: a base color, a slightly darker hover color, and a darker active color.

```css .uk-scope .hk-button-primary.hk-button-primary { background-color: #d1ba77; color: #fff; } .uk-scope .hk-button-primary.hk-button-primary:hover, .uk-scope .hk-button-primary.hk-button-primary:focus-visible { background-color: #bca76b; color: #fff; } .uk-scope .hk-button-primary.hk-button-primary:active, .uk-scope .hk-button-primary.hk-button-primary.hk-active { background-color: #ab9962; color: #fff; } .uk-scope .hk-button-primary.hk-button-primary:disabled { background-color: transparent; color: #999; border-color: #e5e5e5; }```

The doubled class name is intentional. It gives the rules enough specificity to override the plugin's defaults regardless of stylesheet load order.

Keep the `:disabled` block so that disabled buttons stay a muted grey instead of turning your brand color.

**Search bar buttons.** If your search bar is styled through the HomeRunner Toolkit's Skin module, its button colors are set separately in the Skin settings (search button color, hover, and text). Use the same values in both places for a consistent look.

Still stuck? [Contact the HomeRunner team](https://homerunner.io/contact/) with your site address and what you tried, and we take it from there.