Register

Change the Button Styles of your Form

Our platform's Landing Page Designer provides you with countless options to design your landing page and make it as beautiful -and as effective- as possible. After you have selected the Structure of your landing page and added a Form element to a Container within your landing page, its settings will immediately become available on the left side of your Landing Page Designer page.

One of the options available is to edit its Button Styles


Scroll down the settings until you find the
Button Styles option, then click on it to expand the menu.edit_button_styles_form_landing_page_1.png

 

You now have the following options with regard to your form's Button.

  • Button Color
    Choose a color for your Button out of a color palette.

  • Label Color
    Choose a color for your Button's label out of a color palette.

  • Border Color
    Choose a color for your Button's border out of a color palette.

  • Label
    In the Label field, fill in your Button's label text.

  • Font Family
    Choose a font for your Button's label using the drop-down menu.

  • Font Size
    Choose a font size for your Button's label either by using the up/down arrows, or by simply typing the desired number directly into the area next to the arrows.

  • Decorations
    Choose whether your Button's label will be in ItalicsBold or Underlined (or all three if you prefer).

  • Alignment
    Use the drop-down menu to choose the alignment of your Button, thus determining where the Button will 'sit' under your Form's text field. You have three alignment options to choose from: LeftMiddle, and Right.

  • Button Width
    This option provides you with a drop-down menu so that you can specify your Button's width. You have three options: Full WidthFit to Text and Custom Fit.


If you go for Full Width, your Button will span the entire width of the Form field. You then have these options:

  • Label Padding
    Set the Padding (in other words, the height) of you Button, using the up/down arrows or typing the desired value directly into the area next to the arrows.
  • Distance
    You can adjust the Distance of your Button from the Form field, either by using the up/down arrows or by typing the desired distance value directly into the area next to the arrows.
  • Border Width
    The Border Width option allows you to increase or decrease your Button's border, either by using the up/down arrows or by typing the desired number directly into the area next to the arrows.

  • Corner Radius
    Finally, the Corner Radius option allows you to choose how rounded your Button's border corners will be. You can, once again, set this using the up/down arrows or, alternatively, by just typing the desired value in the area next to the arrows.


If you select 
Fit to Text, your Button's width will be dependent on, and change accordingly to, the text. You then have the following options:

  • Label Padding
    Set the Padding (in other words, the height) of you Button, using the up/down arrows or typing the desired value directly into the area next to the arrows.

You also have options with regard to your Button's Distance, Border Width and Corner Radius, as described above.

Finally, if you would like to get more even more creative with your Button, you could go for the third Button Width option, namely Custom Fit. When you select Custom Fit, you are presented with the following options to customize your Button:

  • Button Width
    Use the up/down arrows to select your desired Button width, or type the desired number directly into the area next to the arrows.
  • Button Height
    U
    se the up/down arrows to specify your Button's height, or simply type the number directly into the area next to the arrows.

You also have the options for your Button's Margin, Distance, Border Width and Corner Radius, as described previously.