[John SParticipant]

Hello,

I am using the transparent style button. I need to know how to change the font size within the button, without changing the size of the button’s border.

Also, it looks like the text in the button is not quit centered horizontally (there is more space below the text than above) in the border of the button. This is especially noticable in the regular and large size button, which happens to be the size I need to use. How do I completely center the text in the button border?

[RupokMember]

Hi there,

Thanks for writing in! You can follow this article to apply additional styling to a button – https://community.theme.co/kb/implementing-additional-button-colors/

Also you can utilize the Style field and set CSS directly (i.e. font-size: 20px;).

Hope this helps.

Cheers!

[John SParticipant]

Hi,

I tried the css to adjust the font size. It does change the font size, but unfortunately changes the size of the button also. I want the button to remain the size of the set global styling, and only reduce the font size. Simply put, if I reduce the text size, I only want the text to reduce in size, not the button size.

Also, how exactly would I be able to change the width of the button independently from the text size displayed inside?

[LelyModerator]

Hi John,

By default the size of the button will depend of the font size and it’s padding. The space sorrounding the text is controlled by the padding property. Please see this:http://theme.co/x/demo/icon/1/shortcodes/buttons/. Depending on the size of the button you have chosen the space between the text and the edge of the button box will adjust. Then aside from that, the button will also adjust depending on the font size. It is built that way for responsive nature.

To uniform the space on top and bottom of the button, you may add this on the button style field:
padding: 0.579em 1.105em;
0.579em -> this will be your top and bottom spacing
1.105em -> space on the left and right side.
Feel free to adjust this accordingly.

If you want fixed width, you can add width property like below on the button style field:
width: 100px; Adjust the value accordingly.

Hope this helps.

[John SParticipant]

Think I got it to where I want it. Thanks! Will the button be responsive and centered on all devices with the width being manually altered like I did?

[FriechModerator]

Hi There,

If you defined a width that is a fixed value (px) that button will have that width regardless of the screen devices, so if you have the button width: 400px; most probable the button will be cut-off on a device that is 320px width. You can use a percentage value instead (e.g. width: 40%;).

Hope this shed some lights.

Cheers!

[Author]

Posts