### [How to Customize Button Styles With CSS (With Examples)](https://wpforms.com/how-to-customize-button-styles-with-css-with-examples/)

**Published:** June 26, 2017
**Author:** Hamza Shahid

**Excerpt:** Do you want to change the look of your forms’ buttons?

WPForms allows you to customize button styles using built-in styling controls in the block editor or via CSS.

In this article, we’ll show you how to customize button styles using both methods. See which one works for you!

**Content:**

Do you want to change the look of your forms’ buttons?

WPForms allows you to customize button styles using built-in styling controls in the block editor or via CSS.

In this article, we’ll show you how to customize button styles using both methods. See which one works for you!

[Customize Form Button Styles Now!](https://wpforms.com/pricing/)

- [How to Customize Button Styles in WPForms with CSS](#aioseo-how-to-customize-button-styles-in-wpforms-with-css-5)
    - [Option 1: Making Sitewide Customization (CSS)](#aioseo-option-1-making-sitewide-customization-css-8)
    - [Option 2: Customizing a Button Style Individually](#option-2-customizing-a-button-style-individually)
- [How to Customize Button Styles Without CSS](#how-to-customize-button-styles-without-css)
    - [Styling Options for the WPForms Block](#styling-options-for-the-wpforms-block)
    - [Access the Button Styles Settings](#access-the-button-styles-settings)

## How to Customize Button Styles in WPForms with CSS

Before we start, you’ll need to install and activate the [WPForms plugin](https://wpforms.com/pricing/) on your site. Also, you’ll need to create at least one form. See our tutorial on [creating a simple contact form](https://wpforms.com/how-to-create-a-contact-form-in-wordpress/) as an example to get started.

[![The WPForms homepage](https://wpforms.com/wp-content/uploads/2024/08/WPForms-Website.png)](https://wpforms.com/pricing/)### Option 1: Making Sitewide Customization (CSS)

Customizing button styles of your form buttons is pretty easy once you have the [CSS code](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/) you want to use. If you like, you can just copy and paste one of the examples below or even combine them.

The code snippet must be pasted into your Additional CSS section in the Customize panel. This can be done by navigating to **Appearance » Customize » Additional CSS**. Then just click **Save & Publish**, and you’re done.

![add css code for button style](https://wpforms.com/wp-content/uploads/2017/06/add-css-code-for-button-style.png.webp)An even easier method is to use a plugin like WPCode, which allows you to [add different types of code snippets](https://wpforms.com/how-to-add-custom-code-snippets-in-wordpress/) to your site. In this case, you’ll just need to paste the CSS code for the button style by clicking the **Use Snippet** button.

![wpcode add new snippet](https://wpforms.com/wp-content/uploads/2017/06/wpcode-add-new-snippet.png.webp)Now let’s take a look at a few different ways to style your form buttons with CSS.

#### How to Create a Button With a Transparent Background

Do you want to create a transparent background for your WPForms button? Transparent background buttons, also known as ghost buttons, are a popular web design trend.

It is usually used in forms and call to actions placed on top of wide background images. Take a look at a few examples of transparent buttons on different websites.

**Example #1: Transparent Form Button**

![ghost button example](https://wpforms.com/wp-content/uploads/2017/06/ghost-button-example.png.webp)**Example #2: Transparent Call-to-Action Button**

![cta example ghost button](https://wpforms.com/wp-content/uploads/2017/06/cta-example-ghost-button.png.webp)To create a transparent background button, all you need to do is to copy the below code snippet into your **Additional CSS** section.

```
div.wpforms-container-full .wpforms-form button[type=submit] {
  color: #0099CC; /* Text color */
  background-color: transparent; /* Remove background color */
  border: 2px solid #0099CC; /* Border thickness, line style, and color */
  border-radius: 5px; /* Adds curve to border corners */
  text-transform: uppercase; /* Make letters uppercase */
}
```

Here’s how the button will look:

![ghost button](https://wpforms.com/wp-content/uploads/2017/06/ghost-button.jpg)#### How to Create a Button With a Color Gradient

Unlike ghost buttons, using a gradient button isn’t a new trend. However, if those multicolored gradient style buttons are best suited for your website, you can follow this tutorial.

As it’s done with CSS, you can easily scale it up or down without losing resolution. If you’re looking for a tool to create CSS for gradients, you may use [ColorZilla’s gradient editor](http://www.colorzilla.com/gradient-editor/).

In the CSS below, we’ve used browser-specific styles to ensure that the gradient appears on as many different browsers as possible.

```
div.wpforms-container-full .wpforms-form button[type=submit] {
  border-radius: 30px; /* Curve of border corners */
  text-transform: uppercase; /* Make letters uppercase */
  color: white; /* Text color */
  background: #0099cc; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#e5f4f9, #b2e0ef, #7fcce5, #0089b7, #0099CC, #b2e0ef); /* Standard syntax */
}
```

Here’s how the button will look:

![gradient button](https://wpforms.com/wp-content/uploads/2017/06/gradient-button-1.jpg)#### How to Create a Rounded Corner Button

Do you want to draw users’ eyes to the call to actions? According to some research, rounded corners enhance information processing and draw our eyes to the center of the element.

If you’re looking to attract users’ attention, you might want to test your [form conversion rates](https://wpforms.com/10-research-based-tips-to-improve-contact-form-conversions/) by creating a rounded corner button for your WordPress form.

```
div.wpforms-container-full .wpforms-form button[type=submit] {
  background-color: #0099CC; /* Blue background color */
  border-radius: 30px; /* Curve of border corners */
  text-transform: uppercase; /* Make letters uppercase */
  color: white; /* Text color */
}
```

Here’s how the button will look:

![rounded corner button](https://wpforms.com/wp-content/uploads/2017/06/rounded-corner-button.jpg)#### How to Replace Your Button With an Image

Using a graphic button is probably the easiest way to customize the button of your form.

You can easily find several graphic buttons to download and use on stock photo sites. Then you can replace your form’s button with a graphic button.

Make sure to upload the button graphic to the media uploader by going to **Media » Add New**. Then replace the below URL with your image URL:

http://yoursite.com/your-image.jpg

```
div.wpforms-container-full .wpforms-form button[type=submit] {
  background-image: url(http://yoursite.com/your-image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: transparent; /* Hide the 'submit' text */
  border: none; /* Remove the border */
}
```

#### How to Create a Multi-Line Button

Before submitting your form, your users will have several questions on top of their minds. To boost conversions, you can answer those questions with the appropriate copy in or around your button.

When creating a button for your form, look at it through the eyes of your visitors. It helps you to write the appropriate copy for your button geared towards conversion.

In most cases, to include all those details in your button you’ll have to create a multi-line button. Here’s how to create a multi-line forms button in WPForms.

```
div.wpforms-container-full .wpforms-form button[type=submit]:after {
  content: 'Second line text'; /* Text for second line of button */
  display: block; /* Puts this text on its own line */
  font-size: 10px;
  margin-top: 5px; /* Add distance from first line of text */
  font-weight: normal; /* Remove bold style */
}
```

Here’s how the button will look:

![multiline button](https://wpforms.com/wp-content/uploads/2017/06/multiline-button.jpg)### Option 2: Customizing a Button Style Individually

What if you just want your new style to be used on a single WPForms form, but not every form on your site?

If you prefer to change the button style of an individual form button using CSS, you need to find the unique ID of your form.

First, open a page containing the form you want to modify. Take your mouse to any field in the form, **right click » Inspect Element**.

![inspect element](https://wpforms.com/wp-content/uploads/2017/06/inspect-element.png.webp)The browser screen will split, and you will see the source code of the page. In the source code, you need to locate the starting line of the form code.

![inspect wpforms elements](https://wpforms.com/wp-content/uploads/2017/06/inspect-wpforms-elements.png.webp)As you can see in the screenshot above, our contact form code starts with the line:

```

```

We will use this ID in our CSS to style our contact form. We will replace .wpforms in our first CSS snippet with #wpforms-14.

The id attribute is a unique identifier generated by WPForms for this particular form, so the style won’t apply anywhere else.

For example, you may simply insert the following snippet at the beginning of the first code snippet.

```
div#wpforms-14 {
  background-color: transparent !important;
}
```

For a more direct method to locate your form ID, just head to **All Forms** and locate the **Shortcode** column. You’ll find the form ID here within no time.

![wpforms id](https://wpforms.com/wp-content/uploads/2017/06/wpforms-id.png.webp)[Customize Form Button Styles Now!](https://wpforms.com/pricing/)

## How to Customize Button Styles Without CSS

Before adding CSS, consider whether the built-in styling controls in WPForms will help you achieve the button style you want more easily.

This post on [how to style contact forms in WordPress](https://wpforms.com/how-to-style-contact-forms-in-wordpress/) explains more about WPForms’ no-code form styling options within the WordPress block editor.

The process is simple. Open up a form, and in the block editor, click on the form to open [additional styling options](https://wpforms.com/docs/styling-your-forms/) for the WPForms block.

![click form block editor](https://wpforms.com/wp-content/uploads/2017/06/click-form-block-editor.png.webp)### Styling Options for the WPForms Block

You can change the color theme, form fields, labels, buttons, and the container and background styles without writing any CSS in the WPForms block settings.

![styling options block editor](https://wpforms.com/wp-content/uploads/2017/06/styling-options-block-editor.png)### Access the Button Styles Settings

Under **Button Styles**, you can change your buttons’ size, color, border, border size, border radius, and border style. Here are the options that you can choose from.

- **Size:** This option tells the button what size it is. You can choose from Small, Medium, and Large.
- **Border:** With this setting, you can give your buttons a border that is either solid, dashed, or dotted.
- **Border Size:** This tells your buttons how thick their edges should be. You can choose a different unit if pixels (px) are not what you need for your design.
- **Border Radius:** You can change how round the corners of your buttons are to make them look softer or sharper. While pixels (px) are the standard unit, you can change it to suit your design needs.

![button styles settings](https://wpforms.com/wp-content/uploads/2017/06/button-styles-settings.png.webp)You can also change the background and text colors of your button in the **Colors** panel below.

![button colors settings](https://wpforms.com/wp-content/uploads/2017/06/button-colors-settings.png.webp)[Customize Form Button Styles Now!](https://wpforms.com/pricing/)

### FAQs about Customizing Button Styles with CSS

Customizing button styles is a popular topic among our readers. Here are answers to some of the most common questions about styling your WPForms buttons with CSS and the block editor.

#### How to change the styling of a button in CSS?

To change a button’s look with CSS, set properties like `background-color`, `border`, `border-radius`, `padding`, and `font-size` in a rule that targets the button. In WordPress, paste that rule into **Appearance » Customize » Additional CSS**. For a WPForms button, target `.wpforms-form button[type=submit]` so the styles apply only to your form.

#### How can I make a form with custom buttons?

Use a drag-and-drop builder like WPForms to create the form, then style the button to match your brand. You can adjust the size, border, and color right in the block editor, or add your own class in **Settings » General » Advanced** with the **Submit Button CSS Class** field and style it in **Appearance » Customize » Additional CSS**.

#### How do I customize my submit button?

In WPForms you can style the submit button with or without code. For no code, click the form in the block editor, open **Button Styles**, and adjust the size, border, and colors. To go further, target `.wpforms-form button[type=submit]` with custom CSS in **Appearance » Customize » Additional CSS**, or follow our guide on how to [customize the submit button](https://wpforms.com/docs/how-to-customize-the-submit-button/).

#### What is the CSS class for the WPForms submit button?

WPForms renders the submit button as a `button[type=submit]` element inside the `.wpforms-form` container, so the selector `.wpforms-form button[type=submit]` targets it (older setups may use `input[type=submit]`). Add `!important` to your rules if a theme style overrides them. You can also assign your own class in **Settings » General » Advanced** using the **Submit Button CSS Class** field, then style that class.

#### How do I add custom CSS to WPForms?

You have a few options. Paste your CSS into **Appearance » Customize » Additional CSS**, add it with a code snippet plugin like WPCode, or open the form builder and use the **Form CSS Class** and **Submit Button CSS Class** fields under **Settings » General » Advanced**. For a full walkthrough, see our guide on how to [add custom CSS classes](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/) to WPForms.

#### How do I change a button’s color in WordPress?

The easiest way is the WordPress block editor, with no code required. Click your WPForms block, open **Button Styles**, and set the background and text colors in the **Colors** panel. If you would rather use code, add a `background-color` rule for `.wpforms-form button[type=submit]` in **Appearance » Customize » Additional CSS**. You can find more no-code options in our guide to [styling your forms in the block editor](https://wpforms.com/docs/styling-your-forms-in-the-block-editor/).

### Next, Check Out How to Customize Your Login Page in WordPress

Now you know how to style contact forms with CSS, you might want to take a look at [how to create a custom login page for your site](https://wpforms.com/how-to-create-a-custom-login-form-for-improved-site-branding/). We’ve also got some plugin roundups to help you choose the best plugins as your site grows:

- [Best SEO Plugins](https://wpforms.com/seo-plugins-wordpress/)
- [Best Social Media Plugins](https://wpforms.com/social-media-plugins-wordpress/)
- [Best Backup Plugins](https://wpforms.com/best-backup-plugins-for-wordpress/)
- [Best Email Log Plugins](https://wpforms.com/best-email-log-plugins-for-wordpress/)
- [Best TikTok Plugins](https://wpforms.com/best-tiktok-plugins-for-wordpress/)
- [Best SMTP Plugins](https://wpforms.com/best-wordpress-smtp-plugins/)

[Create Your WordPress Form Now](https://wpforms.com/pricing/)

Ready to build your form? Get started today with the easiest WordPress form builder plugin. [WPForms Pro](https://wpforms.com/pricing) includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on [Facebook](https://facebook.com/wpforms) and [Twitter](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** css, style, submit button styles

---