# Brand Button Styles (SCSS)

> Restyles theme and block buttons with your brand color, hover and focus states, generated from a few SCSS variables.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: buttons, scss, branding, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-brand-buttons-scss/

## Code

```scss
$brand: #2271b1;
$brand-text: #ffffff;
$radius: 6px;
$padding: .7em 1.4em;

%wpide-button {
    background: $brand;
    color: $brand-text;
    border: 2px solid $brand;
    border-radius: $radius;
    padding: $padding;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;

    &:hover,
    &:focus {
        background: darken($brand, 8%);
        border-color: darken($brand, 8%);
        color: $brand-text;
    }

    &:focus-visible {
        outline: 3px solid rgba($brand, .4);
        outline-offset: 2px;
    }
}

.wp-element-button,
.wp-block-button__link,
.button,
button[type="submit"],
input[type="submit"] {
    @extend %wpide-button;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: $brand;

    &:hover,
    &:focus {
        background: $brand;
        color: $brand-text;
    }
}
```

## Notes

Change the variables at the top. WPIDE compiles the SCSS to CSS for you.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Brand Button Styles (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/