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.
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.
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