### [Customizing Previous and Next Buttons in Multi-Page Forms Using CSS](https://wpforms.com/docs/how-to-customize-the-previous-and-next-buttons-in-multi-page-forms/)

**Published:** December 11, 2023
**Author:** Umair Majeed

**Excerpt:** Learn how to customize the style of your multi-page form’s previous and next buttons.

**Content:**

Do you want to customize the previous and next buttons in your multi-page forms? Customizing your forms’ buttons can be a great way to add personality and style to your site.

This tutorial will go over how to customize the style of your multi-page form’s previous and next buttons.

- [Styling the Previous and Next Buttons](#style-previous-and-next)
- [Customizing Hover Styles](#hover)
- [Example CSS](#example)

![Customizing Previous and Next Buttons](https://wpforms.com/wp-content/uploads/2023/06/customize-prev-next-button.gif "Customizing Previous and Next Buttons")**Note**: If you’d prefer to style your form without using code, check out our [form styling](https://wpforms.com/docs/styling-your-forms/) tutorial.

---

Before you get started, make sure WPForms is [installed and activated](https://wpforms.com/docs/install-wpforms-plugin/) on your site and that you’ve [verified your license](https://wpforms.com/docs/verify-wpforms-license/). Then, [create a multi-page form](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms/) to add previous and next buttons.

**Note**: To see a multi-page form in action and get started quickly, you can use our pre-built [Blue Badge Application Form Template](https://wpforms.com/templates/blue-badge-application-form-template/) as a foundation for your own form. You can then apply the customizations we’ll cover in this tutorial to style the previous and next buttons.

## Styling the Previous and Next Buttons

[CSS](http://www.wpbeginner.com/glossary/css/) provides incredible flexibility to customize the previous and next buttons in WPForms and any other aspect of your form.

If you’re new to CSS or would like a refresher, the best place to start is with our [introductory guide to CSS](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/).

Here’s the default CSS for WPForms’ previous and next buttons, as well as comments to note what each line of CSS does:

```

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}
```

You can change each of these values to style your buttons in different ways. As an example, we’ll start by changing our buttons’ background color to orange, and the text to white.

First, we’ll need to find the hex codes for the colors we want to use. [htmlcolorcodes.com](http://htmlcolorcodes.com/) and [Adobe Color CC](https://color.adobe.com/create/color-wheel/) are helpful free tools that can help your choose your colors.

Once we have the hex codes for the colors we want, we can add them to our CSS:

```

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #e27730 !important; /* Orange background */
    color: #fff !important; /* White text */
}
```

**Note**: When adding CSS to your site, it might be necessary to include **!important** before the semicolon to make sure your custom styles are applied successfully. Check out our guide to [troubleshooting CSS](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/) for more details.

Next, we need to [add this CSS to our site](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). The easiest way to do this is by using the WordPress CSS Editor. To do this, go to **Appearance** » **Customize** and select **Additional CSS**.

![Opening the Additional CSS tab of the Customizer](https://wpforms.com/wp-content/uploads/2021/06/customizer-additional-css-2.png)Once you’ve opened the Additional CSS section, you can add your new CSS. Then click the **Publish** button, and you’re all set!

![Adding CSS to customize the WPForms previous and next buttons in the Customizer](https://wpforms.com/wp-content/uploads/2021/06/adding-css-customizer.png)Here’s what our buttons will look like now, with our example CSS applied:

![Customized previous and next buttons on the frontend](https://wpforms.com/wp-content/uploads/2021/06/customized-previous-next-buttons-example-1.png)**Note**: Having trouble getting your newly added CSS to show up on your site? Check out our tutorial on [troubleshooting this issue](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/).

## Customizing Hover Styles

CSS also allows you to apply completely different styles when users hover their cursors over a button. This change helps improve the user experience because it lets users know that the button is clickable.

Below is the default CSS for WPForms button hover styles. As noted in the comments, the background color becomes a little darker and the border color becomes a little lighter:

```

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}
```

You might notice this is much less CSS than you saw for the button when it’s not hovered over. This is because CSS will apply all of the earlier styles to your hovered button unless told otherwise.

For example, if you leave the default styles in place, the text color will remain black when users hover over the button. This is because the button’s text color would normally be black, and we haven’t told it to change upon hover.

As with the previous custom CSS example, you can modify any of these values to change the button’s hover styles. For our example, we’ll give the button a darker orange background when it’s hovered over.

```

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #cd631d !important; /* Darker orange background */
}
```

Here’s what the buttons will look like with the CSS applied:

![Previous and next buttons with custom hover styles](https://wpforms.com/wp-content/uploads/2021/06/hover-styles-example-2.gif)## Example CSS

Now that we’ve covered the basics, let’s go through a complete example of custom CSS for the previous and next buttons.

**Note:** The code below will change the previous and next buttons for **all** of the multi-page forms created on your site with WPForms.

If you want to style the previous and next buttons only for a single form, you’ll need to find the unique ID for that form. For more details, see our complete guide to [styling contact forms with CSS](https://wpforms.com/how-to-style-contact-forms-in-wordpress/).

Here’s the CSS we’ll add for this example, which includes style changes on hover:

```

/* New button styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #003B6D !important; /* Dark blue background */
    border: 2px solid #BDBDBD !important; /* Gray border */
    color: #fff !important; /* White text */
    font-size: 1em !important; /* Increase text size */
    font-weight: bold !important; /* Bold text */
    padding: 16px !important; /* Increase distance between text and border */
    width: 25% !important; /* Make the button quarter-width */
}

/* New button hover styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #BDBDBD !important; /* Gray background */
    border: 2px solid #003B6D !important; /* Dark blue border */
}
```

Below is what our customized buttons will look like with this CSS applied:

![Customized previous and next buttons on the frontend](https://wpforms.com/wp-content/uploads/2021/06/customized-previous-next-buttons-example-2-2.png)And here’s what our buttons will look like when hovered over. Remember, the only changes are the background and border colors:

![Customized previous and next button hover styles on the frontend](https://wpforms.com/wp-content/uploads/2021/06/customized-previous-nexxt-button-hover-styles-1.png)That’s it! You can now customize your previous and next buttons using custom CSS.

Want to add even more custom styles to your forms? Check out our tutorial on [how to customize individual form fields](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/).

**Categories:** Styling, Styling and Customization

---