Using the Custom CSS and JS plugin, I have coded all of the buttons on my website to be green with white text, then white with blue text when hovered over:

.wp-block-button .wp-block-button__link {
    background-color: #84ea6a; /* white text is the default with the them I am using */
    transition-duration: 0.3s;
    border-radius: 0px;
}

.wp-block-button .wp-block-button__link:hover {
    background-color: white;
    color: #2f69b3;
}

This works. However, I would like to make one button on my website be orange to stand out more. In order to do so, I added the css class “alert-button” to the button within the advanced options of the block editor, then put the following code in the style sheet:

.alert-button {
    background-color: #ffa500 !important;    
    color: #ffa500 !important; /* tried with both just in case I was not thinking correctly. Also tried with each individually */
}

However, this does not result in the button turning orange. I went and inspected the button in my browser, and it does show that orange is set for those buttons, but it doesn’t actually appear as orange. Just the standard blue and green like all of the other buttons.