Symmetry theme- changing the font size of buttons

[elotomo]

Hello,

I would like to increase the font size only in the buttons and and make them bold. How can I do this?

My store: https://www.drollsport.com

Password: Wixa

Thank you in advance, 

Tomek 

[niraj_patel · Accepted solution]

Hello @elotomo 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .text-overlay__inner span.text-overlay__button.btn.btn--primary {
     font-size: 16px !important;
     font-weight: 800;
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[elotomo]

Hi, 

Thank you!

I also wanted to ask if it is possible to change the background of the button to transparent? So that when you hover over the button, there is no colored background, only a transparent one. Just like in the photo below.

 

[Anshul_arora]

Hello @elotomo 

I understand you are looking to increase the font size of buttons & make them bold.

Please use the below CSS code for the desired changes.

Add the code at the bottom of theme.liquid file before </body> tag and save.

<style>

span.btn {
font-size: 17px;
font-weight: bold;
}

</style>

[Please feel free to change the font-size pixel ]

Output will be like this -: https://prnt.sc/dIoDJ8ZnVOnV

I hope the code helps you.

Please share if you have any queries.

Thank you.

[elotomo]

Hi, 

Thank you!

I also wanted to ask if it is possible to change the background of the button to transparent? So that when you hover over the button, there is no colored background, only a transparent one. Just like in the photo below.

[Anshul_arora]

Hello @elotomo 

Please add this code at the bottom of the theme.liquid file before </body> tag for making the button background transparent on hover.

<style>

.btn:hover {
background: transparent !important;
}

</style>

Output -:

I hope this helps.

Thank you.

[elotomo]

Dear @Anshul_arora, 

just one more thing, how can I modify your code to display the button border?

Thank you!

[Anshul_arora]

Hello @elotomo ,

You have already applied border with 'important' property because of this our border code will not work,

You have remove the important or make change of the border in the respective section.

This code can be find in main.css file of your store.

[Code may be written in 4796 line in main.css file https://prnt.sc/uYB3h4zFS1vc ]

I hope this helps.

Thank you.

[elotomo]

Thank you!