### [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

**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.

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

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

## 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.

![WPForms home](https://wpforms.com/wp-content/uploads/2021/11/wpforms-1700.png)

### 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/ "How to Style WPForms With Custom CSS (Beginner’s 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)

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)

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)

**Example #2: Transparent Call-to-Action Button**

![cta example ghost button](https://wpforms.com/wp-content/uploads/2017/06/cta-example-ghost-button.png)

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)

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)

As you can see in the screenshot above, our contact form code starts with the line:

```
div class="wpforms-container wpforms-container-full" id="wpforms-14"
```

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)

[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)

### 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)

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)

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

### FAQs about Customizing Button Styles with CSS

Customizing button styles is a popular topic of interest among our readers. Here are answers to some common questions about it:

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

To change a button’s appearance using CSS, you can specify custom styles for properties like background color, border, font size, padding, and more. In WordPress, you can paste your CSS styles into **Additional CSS** in the Customizer.

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

To build a form with custom buttons, consider using a WordPress plugin like WPForms. It provides drag-and-drop tools to make form building easy.

For custom button styles, go to the Additional CSS section in WordPress and input your CSS code, targeting the specific form or button class names WPForms gives.

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

To customize your submit button in WPForms, edit the form, select the “Submit Button,” and directly modify the text label. Use the Block Editor or Additional CSS to further adjust the button’s styles with custom colors, fonts, and sizes.

### 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

---