[Resolved] How to make button bigger?

[Anonymous]

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!

[Elvin]

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.

[Anonymous]

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

[Elvin]

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.

[Anonymous]

Hello Elvin,

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

[David]

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;
}

[Anonymous]

Thanks David, worked perfectly 🙂

[David]

Glad to hear that!

[Author]

Posts