How to Customize Button Beauty with LoginPress

By default, the WordPress site’s Log In button has a very basic design. It has a specific size, color, and placement. It doesn’t do much to support your branding.

Default Log In Button

Since the Log In button is important for initiating the login process on your WordPress site, it should be designed to catch the user's attention.

Fortunately, LoginPress has a Button Beauty feature that lets you customize Log In Button precisely how you want it to appear on the Login, Register, and Forget  Form in terms of color, text, hover color, shadowing, and more. 

This knowledgebase article will show how you can easily customize the Log In Button on the login form with LoginPress.

Let’s get started!

LoginPress Button Beauty 

Step 1. Navigate Customizer 

First, go to the left sidebar of the WordPress admin dashboard. Navigate to LoginPress and click on the Customizer option.

Customizer

A new screen with all of the Customization Options will open up. Click the Button Beauty option.

Button Beauty

After clicking on the Button Beauty option, a new window will open, where you’ll have several options to customize the Button Beauty precisely the way you want.

Customize Button Beauty

Now that you know how to start with LoginPress Button Beauty let's dive deep into the Button Beauty features.

Step 2. Customize with Button Beauty Feature

Here we are going to cover all of the features you’ll find in the LoginPress Button Beauty customizer.

1. Button Color: 

You can easily customize the color of the Login, Register, and Forget Form buttons.

All you need to do is go to the color picker control and select any color.

Note: You’ll find customization options for customizing the Button Beauty on the left-hand side. Along with the LIVE Preview, to instantly track the changes made to the Button Beauty on the right-hand side. 

Button Color

2. Button Border Color: 

You can customize the border color of the Login, Register, and Forget Form buttons.

Simply go to the color picker control and select the color that complements your login page theme.

Button Border Color

3. Button Color (Hover): 

If you want to give your Log In button a little twist, customizing Button Color (Hover) effects is ideal. It makes your Log In button livelier and more appealing.

You can customize the hover color of the Log In/Register/Forget Form button.

4. Button Border (Hover):

Tweaking Botton Border hover color effects is not difficult with LoginPress.

You can easily customize Log In, Register, and Forget Form button hover by selecting a color of your choice from the color picker. 

5. Button Box Shadow: 

You can uplift your button beauty by adding shadow to it.

Note: Select Shadow and Shadow Opacity first to see the Shadow.

Button Box Shadow

6. Button Text Color: 

By default, Log In button has a dull white text color. The LoginPress Button Beauty feature lets you add the text color of the Log In/Register/Forget Form by selecting a color from the Button Text color picker.

Button Text Color

7. Button Text Color (Hover): 

You can further customize the Button text hover color of the Log In/Register/Forget Form button by color picker control.

8. Button Size: 

By default, WordPress Log In, Register, and Forget Form button has a specific size. 

The LoginPress Beauty Button feature lets you customize its size. You can make it smaller or bigger simply by using range control.

Button Size

9. Button Top Padding: 

You can customize the top padding of the button form simply with range control.

Button Top Padding

10. Button Bottom Padding: 

Customize the bottom padding of the button form by range control.

Button Bottom Padding

11. Radius: 

LoginPress lets you choose the perfect corner Radius for your Buttons. 

You can make corners of your button square or rounded by range control. It impacts the overall feeling of the interface of your Log In, Register, and Forget Form buttons.

Radius

12. Shadow: 

The Shadow feature enables you to add a shadow to your Log In, Register, and Forget Form buttons. The shadow takes on the same rounded or square corners for your buttons as you’ve selected for the Button radius. 

You can easily make it brighter or darker through Shadow range control or input value into the text field.

Shadow

13. Shadow Opacity: 

The Button Beauty feature lets you customize the shadow opacity of the button. 

Shadow Opacity feature works as same as the Shadow feature.

Shadow opacity

14. Text Size: 

The Button Beauty feature enables you to make changes with the Log In, Register, Forget Form button size. 

It is very simple. Just use the range control under the Text Size to make it look exactly like you want.

Text Size

Once you are done, click on the Publish button to make all the changes LIVE.

Publish

All done! Now it’s your turn. Try out the LoginPress Button Beauty, and let us know how much it helped you. 

If you have any doubts or questions related to this matter, please don’t hesitate to contact our support team.

Check our video below on how to customize the Login button of your login form with LoginPress.

Still stuck? How can we help?

Updated on November 14, 2022

Documentation
LoginPress Support
triangular shape yellowish icon

Frequently Asked Questions (FAQs)

These FAQs answer the most common questions about our WordPress custom login page plugin.

three shapes icon

Is LoginPress WPML Compatible?

LoginPress is fully supported with multilingual. LoginPress is also compatible with WPML Plugin, which means you can easily translate your login page with WPML plugin according to the given translation options in the WPML plugin.

Is LoginPress translation ready?

Yes, LoginPress has full translation and localization support via the LoginPress textdomain. All .mo and .po translation files should go into the languages folder in the base of the plugin.

Is coding skills needed to use LoginPress?

No, It is very easy to setup. Just plug and play. Have fun!

How to Install or Use LoginPress Pro?

Step-by-step instructions on How to Upgrade from existing Free version to Pro
1. You have installed and set up the Free version already.
2. Upload the Pro version.
3. Pro features will be enabled automatically.
4. You don’t need to set up Free version options again.
5. Setup Pro features like Google fonts, Google reCaptcha, Choose themes, etc.

Where is my license key?

License key is the Order ID which looks like in this format.
WHI150807-1234-12345
You can find it in the email Sales Receipt.

three shapes icon

If you Still have Questions?

Get In Touch