For the past few years I’ve been using WordPress’ (new?) post editor (codenamed Gutenberg) to build websites and write blog posts and pages. I do tend to use the default blocks as much as possible purely because a lot of the functionality is present and coded in, speeding up development. One such block that gets used a lot is the buttons block. The button block works pretty well, with a lot of control for almost all the functionality you would tend to associate with buttons.
However, one thing it really struggles with is hover states. By default you don’t get much control, and by default acts similarly to a link with a background. It’s ugly and it doesn’t fit the style of the site, as you can see below.
Sadly, there isn’t a way to control the hover state easily in WordPress. I wasn’t the only one who felt this – Keith Devon posted the question to Bluesky late last year.
Reading it I use a solution that I copy and paste into every project I use to have an inverted hover style. I use this on this site.
It uses Sass, but it is scaleable. It works with any defined colour and the default WordPress button styles, and is controllable. Here is how I built it.
1. Add the Colours to WordPress in the theme.json or WordPress Functions
First of all, you need to add into Gutenberg the colours you would tend to use. For this site, here is the palette I use.
I wanted to keep it relatively simple, with two variants of the purple and a highlighted colour for buttons. To create this palette, you need to add the below to your theme.json file. The theme.json file is the scaffolding used in modern WordPress themes designed to interact with WordPress and set things up relatively simply. You can read more about it on the Full Site Editing website. But for ease, here is the JSON for the theme used to make the colour palette for this website.
"settings":{
"color": {
"palette": [
{
"slug": "dr-white",
"color": "#FFF",
"name": "White"
},
{
"slug": "dr-purple",
"color": "#45004f",
"name": "Dwin Rhys Purple"
},
{
"slug": "dr-text-grey",
"color": "#403d39",
"name": "Text Grey"
},
{
"slug": "dr-pale-purple",
"color": "#ede2ee",
"name": "Pale Purple"
},
{
"slug": "dr-pale-grey",
"color": "#e9ecef",
"name": "Pale Grey"
},
{
"slug": "dr-orange",
"color": "#eb5e28",
"name": "Dwin Rhys Orange"
}
],
// There will be more here, for other settings.
}
}Save this and if you see the custom colours located in your themes palette then it’s working. Be sure to note the slug and colour strings for every colour, we’ll use it in the next step.
2. Add the colour variables to a .scss file
Within your theme, add a .scss file. This guide isn’t really about structuring or building .scss files, to include them in your theme. Usually it’s a custom setup. But for example I’ve got a file called “colours.scss” within my “variables” folder – I use a theme that’s based around Underscores. In it I store the colour variables, as well as some styling for simple things like background colours and default text colour.
First I define the colour variables. I write $color__. I then include the slug of the colour next. I switch between underscores and hyphens because when I need to change things quickly double clicking on the variable name will allow me to select ‘dr-white‘ easily. Most of the time I will be changing from one colour to another, so I can change this quickly.
$color__dr-white: #fff;
$color__dr-purple: #45004f;
$color__dr-text-grey: #403d39;
$color__dr-pale-purple: #ede2ee;
$color__dr-pale-grey: #e9ecef;
$color__dr-orange: #eb5e28;Following this, I create a list. A list in Sass is very similar to an array in most programming languages (you can read about Sass lists here). I create a list that works similar to an associative array called $colors. This contains the slug as created in step one as the key, and the colour variable is the value.
$colors: ("dr-white", $color__dr-white), ("dr-purple", $color__dr-purple), ("dr-text-grey", $color__dr-text-grey),
("dr-pale-purple", $color__dr-pale-purple), ("dr-pale-grey", $color__dr-pale-grey),
("dr-orange", $color__dr-orange);Once you’ve created this, you’re now ready to write the code.
3. Create the loop in the .scss file
Once you have a list, you can loop through the items in the list. The below will loop through each colour, and create the CSS for both default button styles, with each background colour and text colour. The second loop ($icolor/$iname) will invert this style as well on hover.
/* Color Options
--------------------------------------------- */
a.wp-block-button__link {
@each $name, $color in $colors {
&.has-#{$name}-color {
@each $iname, $icolor in $colors {
&.has-#{$iname}-background-color {
border: 2px solid $icolor;
&:hover,
&:active,
&:focus {
background-color: $color !important;
color: $icolor !important;
}
}
}
}
}
}
.is-style-outline {
a.wp-block-button__link {
@each $name, $color in $colors {
&.has-#{$name}-color {
border: 2px solid $color;
}
}
}
}Run this and add a button to any page, and you should get the inverting style. Please note you will have to give both a text and background colour to every button.
It may be a little bit bloated (in effect you have every combination of text and background colours), but I’ve been using this code for a number of years. It’s simple, works, provides a solution and clients seem to like it.
It’s also scalable. Should you wish to add a different colour, you add it to the colour list, theme.json and give it a variable. The Sass code should compile again with the new colour. You can also introduce new styles relatively simply.
I don’t particularly like the !important flag in some places, so could be better. However, this works for the majority of my clients. Let me know how you get on!
Featured Image: “Elevator Buttons” by ishane is licensed under CC BY 2.0.