CSS for button customization

Hi Melissa,

There're more than one kind of buttons in the Tasty site, can you specify which button are you trying to style (Read more/ Learn more/ Submit etc)?

Or are you talking about all of them?

Let me know :)

Hi Ying,
I wasn't aware that there were many buttons. I am referring to the button you add as a block.
Melissa

You mean add button to your posts?

If you are using the Wordpress default Buttons block, you can set the button's background color in the block editor, and also align it to center.
https://www.screencast.com/t/7e0xiyJYo
https://www.screencast.com/t/aaK9l79idk
https://www.screencast.com/t/7e0xiyJYo

Alternatively, you can use the Buttons block from GenerateBlocks that allow you with even more control of the appearance:
https://docs.generateblocks.com/article/buttons-overview/

Let me know if you need further assistance.

I am using the wordpress default button block and customize it each time, which is pretty much every post.

Rather than adding a button block and changing the background color and position each time, I would like to have them automatically default to the middle position and be the background color #CD81B3.

Is it possible to add some CSS code to do this?

Hi there,

IF you want to style ALL default WordPress Button block the same way, you can use this CSS selector:

a.wp-block-button__link.has-background {
    background-color: red;
}

Or if you want to style only the ones within the content area, you can use this:

.entry-content a.wp-block-button__link.has-background {
    background-color: red;
}

Thank you Elvin, that’s perfect! Do you happen to have a code to make the button have center justification every time?

Thank you Elvin, that’s perfect! Do you happen to have a code to make the button have center justification every time?

You can try adding in margin-left: auto; margin-right: auto; to the CSS so it's always centered within its container. :)