WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Customize Button Styles With CSS (With Examples)

by Shahzad Saeed on Jun 26, 2017

Do you want to change the look of your forms’ buttons? WPForms allows you to make basic customization on your buttons using the drag and drop form builder. For advanced customization, you can add custom CSS snippets to your WordPress theme.  In this article, we’ll show you how to customize button styles with CSS.

Customizing Button Styles of  Your Forms

Before we get started, you’ll need to have the WPForms plugin installed and activated on your site. Also, you’ll need to have at least one form created. See our tutorial on how to create a simple contact form as an example to get started.

With WPForms, you can customize the buttons of your forms in two ways. You can either customize button styles for all of your forms or you can style each one individually.

We’ll go over how to use each method.

Method 1: Making Sitewide Customization

Customizing button styles of all of your form buttons is pretty easy once you have the CSS code 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 needs to be pasted into your Additional CSS section in the Customize panel. This can be done by navigating to Appearance » Customize » Additional CSS.

additional css

Then just click Save & Publish, and you’re done.

Method 2: Customizing a Button Individually

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

Before you can customize the button style of an individual form button, you need to find the unique ID of your form.

Simply 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

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

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}

Now let’s take a look at a few different ways to style your form buttons with CSS.

1. Create 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 that 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

Example #2: Transparent Call-to-Action Button

ghost button cta example

With WPForms, you can easily create a transparent background for your forms button. 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 like:

ghost button

2. Create a Gradient Button

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.

In the below CSS, we’ve used browser-specific styles to make sure the gradient shows up 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 image will look like:

gradient button

3. 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 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 image will look like:

rounded corner button

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

} 

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

For example, let’s take a look at the Mozilla Firefox’s button. It includes all the necessary details of the downloadable file, so users don’t have to go back and verify those details before clicking the button.

multi line 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 image will look like:

multiline button

We hope this guide helped you to customize button styles with CSS.

If you enjoyed this article, you might also want to read how to style contact forms in WordPress.

What are you waiting for? Get started with the best WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

  1. How can a add a quantity function into a basic WP form.

    I have a number of shop items that can be selected using a check box. I need to be able to allow someone to pick amounts of each item and then be able to submit it by e-mail.

    Item and cost are all in one field. I just need to be able to add a button +/- next to each item.
    Any ideas how I can do this easily?

    Thanks

    1. Hi Paul,

      We don’t have the ability to include item quantities in quite this way yet, though it’s on our radar to add down the road!

      If you’re willing to consider a modified alternative, you can leverage the Dropdown Items field to do what you’re asking for in a slightly different way — the easiest demonstration of that is to view the short video here: https://cl.ly/3Y2f3o3q1C0M. Basically, you create a Dropdown Items field for each product and fill in the dropdown options with various quantities and associated prices. This allows you to offer both multiple products and various quantities of each of those products.

      I’m sorry we can’t offer quite what you’re looking for, but I hope this helps!

      If you have any other questions with this, please feel free to contact us in support 🙂

    2. These are all great examples. But how do you deactivate the shadow on hover? I just want a button that is pure text in bold caps that says “SUBMIT”. The text should change to gray on hover and active. No border, background, shadow …

      1. Hi Gary,

        Our submit button doesn’t include any shadow by default, so if you’re seeing one this is probably being added by your theme. Since all themes do this a bit differently, we’d need to see an embedded form to help remove it.

        To remove all of these other styles, you’ll need a few extra lines of CSS. We have a tutorial here specifically on customizing the submit button, including hover styles. The examples shown there should walk through everything you’d need to create the custom look you’re describing.

        I hope this helps! If you have any questions, please let us know! We support all paid licenses in our private support channel and WPForms Lite in our forum 🙂

  2. I tried copying and pasting the code to the transparent button style to my Genesis Child Theme and it had no effect at all in changing the look of the buttons. Why do you suppose that is?

    I followed the instructions – Appearance>Customize>Additional CSS>Save.

    Thanks!

    1. Hi Toni,

      That’s a great question, and the answer can vary a lot from site to site (even within the same theme). I’d suggest starting with our How to Troubleshoot CSS Not Working tutorial, which goes through all of the most common issues and how to address them.

      If you give that a shot and are still stuck, please feel free to contact us in support so we can help you troubleshoot further 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.