[Resolved] how to turn round buttons into square buttons

Home Forums Support [Resolved] how to turn round buttons into square buttons

Home Forums Support how to turn round buttons into square buttons

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2195417
    Vladimir

    Hi,

    On this page: https://share.getcloudapp.com/5zuLvjyv I would like to turn these round red buttons into square buttons. How do I do that?
    This is homepage on attention.cc website. Thank you.

    #2195429
    Fernando
    Customer Support

    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. 🙂

    #2195431
    Vladimir

    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.

    #2195456
    Fernando
    Customer Support

    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! 🙂

    #2195466
    Vladimir

    Yes, perfect. You are great. Closing ticket.

    #2195498
    Fernando
    Customer Support

    You’re welcome Vladimir! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.