0

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.

1 Answer 1

3

You probably need to add more specificity or more accurate targeting to override the existing block button styles. In the first case you are applying the styles to the .wp-block-button__link subelement, but not doing this for the orange buttons. Without seeing the page, I'd say you would need something like this (if the custom class is applied to the block button element):

.wp-block-button.alert-button .wp-block-button__link {
    background-color: #ffa500;
    color: #ffa500;
}

or perhaps (if the custom class is applied to a subelement):

.wp-block-button .alert-button .wp-block-button__link {
    background-color: #ffa500;
    color: #ffa500;
}
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.