To Add a colour to your button you can use the colour palette on the right hand side of the Gutenberg editor, here you can also select a text colour and a border radius.

Gutenberg doesn’t support a hover colour in the editor so we need to add a specific class to the actual button to control this.

We have specific keys for each colour which are listed below.

• navy
• white
• grey
• blue
• green
• yellow
• red

So for the specific hover colour we need to declare the class of bg-hover-colourKey so for example if we wanted a red background hover bg-hover-red.

If you wanted red as the non hover colour and a darker/lighter red for the hover colour you could instead use bg-hover-colourKey-darken or bg-hover-colourKey-lighten (bg-hover-red-darken or bg-hover-red-lighten).

Exactly the same rules apply for the text colour on the button.

• text-hover-colourKey
• text-hover-colourKey-darken
• text-hover-colourKey-lighten

You can also assign a circle colour to the arrow, the circle comes in all the colours in the colourKey, the inside arrow comes in either grey or white.

arrow-colourKey-white or arrow-colourKey-grey

For a full example using all options you could have

arrow-right bg-hover-navy text-hover-white arrow-blue-white