Formatting of Buttons

  • Resolved chappers1972

    (@chappers1972)


    4 years ago

    Hi Tom,

    I’m struggling a bit with button formatting.

    Through trial and error, I’ve managed to hack together some CSS to change the formatting of the outline button (the green button at the top of the page – which is part of a cover image). However, the same button behaves differently at the bottom of the page (when part of a media & text block, with a white background).

    Could you let me know how to fix this?

    (What would be really natty would be CSS that I could apply for different colours, for example green-button, blue-button, red-button, where I could define the non-hover and hover colours in the CSS and then just apply the class for the particular colour in the additional CSS).

    Thanks in advance,
    Richard.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Twentig

    (@twentig)

    Hi Richard,

    The issue you encounter with the different button colors is due to the Twenty Twenty-One theme that changes the colors depending on the background color of the block’s parent.

    To create a green-button class, you can try the following CSS:

    .wp-block-buttons .wp-block-button.green-button .wp-block-button__link:not(:hover):not(:active) {
	color: whitesmoke !important;
	background-color: rgb(14, 199, 100) !important;
}
 
.wp-block-buttons .wp-block-button.green-button .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.green-button .wp-block-button__link:active {
	color: whitesmoke !important;
	background-color: rgb(14, 199, 100, 0.8) !important;
}

    The code is a bit complicated, but it’s needed to override the theme’s CSS.

    Have a nice day,
    Tom

    Thread Starter chappers1972

    (@chappers1972)

    Thanks Tom, that works like a dream!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Formatting of Buttons’ is closed to new replies.