Brand Button Styles (SCSS)
Restyles theme and block buttons with your brand color, hover and focus states, generated from a few SCSS variables.
Opens WPIDE on
Code
$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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.