Button Styles

The program allows to customize the appearance of the button according to your wishes.
Open the "Style Settings" and switch to  "Button". Now you will see a preview of the form element. 

You can display an icon on the button instead of or in addition to the text.
The icon can be selected when adding the button to the form.

 

 

Click on "Edit Button Style" directly below the standard "Default" element.
Since the styles are inherited, the "Default" styles will be applied to all buttons unless you set a different style.

 

 

There is a short description for each style. Move the mouse cursor over the (i) in the blue circle to view it.

 

 

 

Button Templates

Web Form Builder 5.2++ contains a set of ready-to-use "Button Templates".

 

 

 

 

Font Family, Weight and Size

The buttons use by default the "Font Family", "Font Weight" and "Font Size" of the host page (or form).
Leave "inherit" or change e.g. the font size for a larger font. In this sample we will use 1.5em which equals 150% of the normal font size.
(You can also specify the font size directly in px (Pixel), e.g. 20px)

 

 

Type in the "Font Size" and click on "OK" to apply the new font size.
As you can see in the image above, the font size of the "Default" button style was applied to all buttons.

 

 

 

Text and Background Color

You can type in the color directly or click on the icon on the right side to pick a color.

 

 

Syntax Samples:

• black
• #000000
• rgb(0,0,0)
• rgba(0,0,0,1.0)

 

A list of color identifiers is at the bottom of this page.
Enter "transparent" if the button should have a transparent background.

 

The color was not applied to the "Disabled Button", because the disabled button uses a different color/style by default.

 

 

 

Border and Border Radius

The "Border" style defines the color and size (thickness) of the border.

The default "1px solid darkgray" equals a "1px solid" border in "darkgray" color.
If you want e.g. a 2px blue border, enter "2px solid blue" or "2px solid #0000FF".

 

Enter "0" if the button should have no border at all!
The "Focus", "Hover", "Clicked" and "Disabled" buttons have (by default) a 1px solid border in different colors, so you need to remove the border for these styles, too.

 

In this sample the button should have no border, but round corners.
The "Border Radius" style is used to define the radius, e.g. 0.5em (50% of the font size)

 

 

 

 

Previous, Next, Submit and Reset

You can define e.g. different colors for the navigation buttons.
In this sample the submit button should be "seagreen".

 

Click on "Edit Submit Style" and change the "Background Color" for the submit button:

 

 

If the "Reset" button should be e.g. red, click on "Edit Reset Style" and type in "red" as "Background Color".

 

 

 

Padding and Line Height

The "Padding" (inner-spacing) and "Line Height" styles are used to define the spacing between the button text and the border.
Click on "Edit Button Style" to edit the style for the "Default" button and change the "Padding" and/or "Line Height":