[Resolved] How to make button bigger?

Home Forums Support How to make button bigger?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1651436
    Sara

    Hello,

    How I can make green button that says “View on Amazon” bigger because it seems to show very small I am looking to show it like big style, how I can do this?

    Thanks!

    #1651449
    Elvin
    Staff
    Customer Support

    Hi there,

    Can you specify how you want it increased?

    Do you want to increase the font-size? If so, try this CSS:

    a.wp-block-button__link strong {
        font-size: 25px;
    }

    Note: While this CSS can work, this can possibly affect other buttons as well (if there are others). I suggest adding amazon-btn class and use the selector to style the button.

    A wise man once said:
    "Have you cleared your cache?"

    #1652333
    Sara

    I want button to log bigger like double the size, same size as buttons on table at the bottom

    #1652361
    Elvin
    Staff
    Customer Support

    I want button to log bigger like double the size, same size as buttons on table at the bottom

    I’m not sure I see what you mean.

    The buttons on the table at the bottom are actually smaller in width than the buttons on the content as shown here: https://share.getcloudapp.com/xQunLY8Q

    You can see that the table buttons only have 154px width while the content buttons have 162px width.

    Regardless, the CSS provided on my previous reply should work. Simply change the font-size to 15px if you want the content button and the table button to have the same font size.

    A wise man once said:
    "Have you cleared your cache?"

    #1652746
    Sara

    Hello Elvin,

    Just want to make green buttons on top on a bigger size like double the size

    #1652970
    David
    Staff
    Customer Support

    Hi there,

    you can try this CSS:

    .wp-block-button .wp-block-button__link {
      font-size: 20px;
      padding: 20px;
    }

    BUT that will apply to all Button Blocks in the post content.
    To isolate it to just Amazon buttons, you would need to select each button in the editor, in Advanced > Additional CSS Class(es) add a custom class eg. amz-button

    Then change the CSS to:

    .wp-block-button.amz-button .wp-block-button__link {
      font-size: 20px;
      padding: 20px;
    }
    #1675855
    Sara

    Thanks David, worked perfectly 🙂

    #1675876
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.