### [How to Customize the Save and Resume Link](https://wpforms.com/developers/how-to-customize-the-save-and-resume-link/)

**Published:** January 5, 2024
**Author:** Editorial Team

**Excerpt:** This CSS snippet will walk you though how to customize the Save and Resume link to appear as a button.

**Content:**

## Overview

Would you like to customize the save and resume link? Using a small CSS snippet, you can easily convert the text link that appears when the **Save and Resume addon** is enabled to appear like a button. Let’s get started!

## Adding the CSS snippet

For the purpose of this documentation, we’re going to presume you’ve already created your form and enabled the **Save and Resume addon**.

However, should you need any assistance with enabling this addon for your form, [please check out this helpful guide](https://wpforms.com/docs/how-to-install-and-use-the-save-and-resume-addon-with-wpforms/ "Save and Resume Addon").

Once your form is created and the addon is enabled, simply add this CSS to your site and customize the colors, the font-family, font-size, etc., however you wish.

If you need help in how and where to add CSS snippets to your site, [please check out this tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for WPForms").

#### Styling for all forms

```

a.wpforms-save-resume-button {
    padding: 10px;
    text-decoration: none !important;
    background-color: #e27730;
    border-radius: 3px;
    color: #ffffff !important;
    font-family: 'Roboto' !important;
    font-size: 17px !important;
    border: 1px solid #e27730;
    transition: all 0.3s ease-out;
}

a.wpforms-save-resume-button:hover {
    color: #e27730 !important;
	background-color: #ffffff;
}
```

#### Styling for specific forms

If you only wanted to apply this change to a specific form, use this CSS instead.

```

form#wpforms-form-999 a.wpforms-save-resume-button {
    padding: 10px;
    text-decoration: none !important;
    background-color: #e27730;
    border-radius: 3px;
    color: #ffffff !important;
    font-family: 'Roboto' !important;
    font-size: 17px !important;
    border: 1px solid #e27730;
    transition: all 0.3s ease-out;
}

form#wpforms-form-999 a.wpforms-save-resume-button:hover {
    color: #e27730 !important;
	background-color: #ffffff;
}
```

Please note that you will need to update the form ID in your CSS from **999** to match your own form ID. If you need any help in finding your form ID, [please review this helpful guide](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "How to Locate Form ID and Field ID").

And now when you view the form, you can immediately see the difference!

![with this CSS you can easily customize the save and resume link](https://wpforms.com/wp-content/uploads/2024/01/wpforms-customize-save-resume-link.jpg)

Would you like to also customize the email subject line for this addon when notifications are sent? Take a look at our tutorial on [How to Change the Email Subject on Save and Resume Email Notifications](https://wpforms.com/developers/how-to-change-the-email-subject-on-save-and-resume-email-notifications/ "How to Change the Email Subject on Save and Resume Email Notifications").

**Categories:** Snippets

**Tags:** CSS, Save and Resume

---