Change only button font and font size

• getbold

  said

  Hello,
  As you can see the button font that the theme is pulling for the buttons is rather small.
  I need to change that font size to 18 and if possible, change the font to Open Sans also.

  I know how to change the H1, H2, H3, etc but cannot change how to alter just the button information.
  Here is the link to my site:
  http://s89.617.myftpupload.com/
  As you can see the “Learn More” buttons are at 14pt and are rather small

  Thanks for your help!

• jeffw

  said

  Yes, you’ve chosen a body font (Crimson Text) that is naturally small as part of the font design.

  The WPBakery Page Builder plugin doesn’t enable you to customise fonts for buttons, but you can tweak the fonts for buttons with some custom CSS.

  If you use Internet Explorer, Chrome, Firefox, Safari or Opera you can use the browser’s built-in developer tools to point at and “inspect” elements on a web page to find out what styles they use. You can even tweak the styles live to experiment with any changes you might fancy…

                 

  So the custom CSS you’d need is this…

  .vc_btn3.vc_btn3-size-md {
    font-family: "Open Sans";
    font-size: 20px;
  }

  Go to Appearance > Theme Options > Custom CSS and add that CSS to your Custom CSS box. Adjust the values to suit your specific situation. Naturally, the “Open Sans” font must already have been loaded in order to use it.

  Thanks.

  References:
  https://www.w3schools.com/cssref/pr_font_font-family.asp
  https://www.w3schools.com/cssref/pr_font_font-size.asp

• getbold

  said

  That is awesome! Thank you very much! Exactly what I was wanting!

  One more question – what about the font color of the buttons in the css?

  Like my footer buttons – the Gray font is hard to read on the “Chino” colored button from WP Bakery.
  I want it to be white like my blog post button
  http://s89.617.myftpupload.com/

• jeffw

  said

       

  So…

  #Bottom a { color: White }
  #Bottom a:hover { color: DimGray }

  Or if you wanted to target just those Chino coloured buttons in the footer…

  #Bottom a.vc_btn3-color-chino { color: White }
  #Bottom a.vc_btn3-color-chino:hover { color: DimGray }