How to Change the Title/Subtitle Font Size of the Button Design Element

By default, the ShortPoint Button Design Element will give you an option to display a title/subtitle. However, you may notice that in the Settings tab of the Button Design Element, you only have the option to change the size of the button not the actual text inside it. 

In this article, we will show you how customize the font size of the title/subtitle of your Button Design Element by applying simple custom CSS.

Before	After

If you would like to apply this solution, please follow the steps in this support article.

TABLE OF CONTENTS

• Before we begin
• Step 1. Open the Settings of the Row
• Step 2. Copy the Custom CSS Code
• Step 3. Update the Button Design Element with the Code
• Result

Before we begin

ShortPoint CSS customizations are available since the ShortPoint version 5.2.2.28 or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.

Step 1. Open the Settings of the Row

Edit the page. Then, open the settings of the Row where your Button Design Element is currently added.

Click the cog wheel icon to open the settings of the Row:

• Live Mode:
   
• Grid Mode:
  
  

• Legacy Page Builder:
   

The Design tab will open.

Step 2. Copy the Custom CSS Code

Here is the custom CSS code you will need to use for changing the font size of the title/subtitle in the Button Design Element:

• For the title of the button:

.shortpoint-btn {
     font-size: 20px !important;
}

.shortpoint-small {
   font-size: 20px !important;
}

Note: You may update the font-size values according to your preferences.

Step 3. Update the Button Design Element with the Code

Switch to the Custom CSS tab:

Paste the copied code from the Step 2 to the Custom CSS field:

You may check how it will look like on your page by clicking the Preview button:  

If you are satisfied with the result, click Update and save the page: 

Result

That's it. This is how it may look like on your page:

Related articles:

• How to Make Rounded Corners for the Button Design Element
• How to Make a Transparent Button (Animated on Mouse Hover)
• How to Add an Edit Item Button to ShortPoint Design Elements