How can we help you today?

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 Design tab of the Button Design Element, you only have the option to change the size of the button not the actual text inside it:


Size


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


Before
After
beforeafter


NOTEIf you added the Button Design Element using the Rich Text Editor, this solution will not work because there is no option to add CSS codes. Make sure to insert the Button Design Element using the library of Design Elements. Check out How to Customize the Button Design Element to learn more about this.


rich text editor

TABLE OF CONTENTS


Prerequisite


Step-by-step Tutorial

Follow the detailed guide below to learn how to customize the font size of buttons:


Step 1: Edit the ShortPoint Web Part


Go to the SharePoint page you want to use and click Edit:


Edit


Click the ShortPoint tag:


ShortPoint tag


Select the pencil icon:


pencil icon


Step 2. Copy the Custom CSS Code

Copy the CSS code that corresponds to the text you want to modify.


  • For the title of the button:


font-size: 14px !important;
  • For the subtitle of the button:


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


NOTEYou can incorporate both codes in the Custom CSS tab:

both codes in css field

Step 3: Edit the Button Design Element


NOTEBefore proceeding, make sure you already have the Button Design Element on your page. You can check out How to Customize the Button Design Element to learn how to insert it into your pages.

 Button Design Element


Click the Button tag:


Button tag


Select the cogwheel icon:


cogwheel icon


Step 4: Paste the code

Click the next icon:


next icon


Navigate to the Custom CSS tab:


Custom CSS tab


Paste the copied code into the Custom CSS field:


paste code


(Optional) Customize the font-size value according to your preferences:


font-size value


Step 5: Save

Click the eye icon to see your page in real-time:


eye icon


Click Save to apply all your changes:


Save


That’s it! You can now customize the Title/subtitle font size of the Button Design Element.


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 59 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more