how to turn round buttons into square buttons

Hi Vladimir,

Here is a CSS code you may try adding in Appearance > Customize > Additional CSS:

.wp-block-button__link {
    border-radius: 0;
}

You may also make this more specific by setting a custom class to the WordPress Button Block, for instance, make-square. Then, use this CSS instead:

.make-square .wp-block-button__link {
    border-radius: 0;
}

Hope this helps! Kindly let us know how it goes. :)

Hi,

I used the first code you gave me and it worked and now it looks like this: https://share.getcloudapp.com/WnuyXm0q - but the text is pushed a little bit down. Let me ask you this.

How do I use the same design and rollover effect you already have on red buttons on the top of your theme: https://share.getcloudapp.com/kpuJeA69 in this section?

That would be the best as it would provide for consistent design and use of elements.

To add a hover effect similar to the buttons above, you can try this CSS:

a.wp-block-button__link:hover{
    background-color:var(--contrast-2);
}

Moreover, you’ll also need to add this CSS as there seems to be too much margin from this core WordPress Block:

.site-content .entry-content .wp-block-buttons {
    margin: unset;
}

Hope this helps! :)

Yes, perfect. You are great. Closing ticket.

You’re welcome Vladimir! :)