Not only does the Moosend Landing Page Designer enable you to easily add a Form element to your landing page, it also gives you many, many options for styling the heck out of said form element!
One of the things you can play with is the style of your form's Button. As soon as you have added a form element to a Container within your landing page, the form element's settings become available on the left side of your Landing Page Designer Page.
Scroll down until you find the Button Styles option, then click on it to expand the menu.
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. - 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 Italics, Bold or Underlined (or all three!) - 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: Left, Middle, 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 Width, Fit 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.
- Margin
Use this option to specify how far 'in' (with regard to the Form's field) you want your Button to start. You can set this using the up/down arrows or by typing the desired number 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
Use 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.
Happy Button designing!!!