CSS Customize the Size of Button Text

1.1 Requirement

Except for the custom buttons in the parameter pane, the size of texts in a cell or a button cannot be changed even if you reset the width and height of the cell or change the font size of the texts in the cell.

How to customize the text size in a button? Here are some steps you may follow:

1.2 Solution

Use CSS to set button height and font size.

2.1 Create a new template

Create a new template and add two Button widgets into the parameter pane. Set the widget names to Submit and Reset respectively:

2.2 Write CSS codes

Create a TXT file, name it“button.css” and click Save. Input the following CSS:

#fr-btn-BUTTON0 .fr-btn-small button.fr-btn-text,
#fr-btn-BUTTON1  .fr-btn-small button.fr-btn-text{
    height: 40px;
    font-size: 25px;
}

Note

Height: Refers to the button height;

font-size: Set the font size as you want;

fr-btn-BUTTON0 and fr-btn-BUTTON1: BUTTON0 and BUTTON1 are button names:

2.3 Reference CSS File

Save the edited CSS file “button.css” to a location under \webapps\webroot\help\css.

Open the template and click [Template]＞[Web Attributes] ＞[Reference CSS].

2.4 Preview

Click [Page Break Preview] and the preview effects are shown as follows:

After modification:

Before modification:

3.1 Template

Use CSS to set button height and font size..cpt

3.2 Reference the CSS file

button.css