How to Customize Button Styles With CSS (With Examples)

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.

WPForms is the best WordPress Form Builder plugin. Get it for free!

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.

Interested in working on your website behind the scenes? Be sure to read our guide on the best WordPress coming soon plugins and themes.

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

Want to add an icon with extra info to a form field? Head over to our tutorial on how to add Tooltips in WordPress forms.

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.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 2 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. 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 🙂

  3. 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 🙂

  4. I can’t figure out why this won’t work. I inputted the Code into the Customizable CSS section but the button stayed the same.

    I want to make it transparent like the first transparent example you have above, but it just doesn’t register.

    I also am hoping to move the actual form down further on the page but that doesnt seem to working either

    1. Hi Jeremy,

      Sorry for the trouble! Some themes make it tougher to apply custom CSS, though usually adding !important will help. Here’s a simple example to demonstrate how to add this:

      div.wpforms-container-full .wpforms-form button[type=submit] {
         background-color: transparent !important; 
      } 
      

      We have a bunch more tips on getting CSS to work over in this troubleshooting CSS tutorial.

      If you give these troubleshooting ideas a try and are still seeing issues, please let us know! We provide support to our paid license users here and to our Lite users here.

      I hope that helps! 🙂

  5. Hi,

    How can I change the height of the submit button. Its height is bigger that other buttons in WordPress and I don’t know what css to use.
    Thanks in advance.

    1. Hi Lewis,

      The easiest way to customize the submit button’s height is by adjusting it’s padding (the distance between button text and border). Here’s the CSS you’d need to do that:

      div.wpforms-container-full .wpforms-form input[type=submit], 
      div.wpforms-container-full .wpforms-form button[type=submit] {
          padding-top: 10px;
          padding-bottom: 10px;
      }
      

      These are currently set to the default values (10 pixels on top and bottom), but you can change these to any numbers you’d like. To keep the text vertically centered, just be sure to keep both top and bottom padding to the same value.

      And in case it helps, you can find our full tutorial on customizing the submit button here.

      I hope this helps! 🙂

    1. Hi Lewis,

      I apologize, however checkboxes are actually generated by the browser and so we’re not able to customize their size. While some themes will provide extensive code modifications to style checkboxes in custom ways, these tend to cause issues (run into conflicts on some browsers, sometimes even break some functionality, etc) which is why it’s generally avoided.

  6. Hello @ JESS i have observed you are the rockstar here, i am currently having issue with my submit button, as soon as you mouse over the submit button, the hover colour spreads beyond the submit button and that is very ugly and not professional, how do i resolve that. I suspect it is picking up the colour from my theme, but i don’t know how to turn it off. Here is the link for better understanding. Just hover on the submit button and see the ugly effect. [URL removed]

    1. Hi Alex — We don’t currently have plans for this, but I’ve noted the idea on our feature request list. Thanks for the suggestion! 🙂

  7. Hi there

    Just wondering how we can add this to all the form fields? I have my form over an image and would like a white border around white font with transparent background. Thanks

  8. Hello
    Is it possible to hide the submit button? I have tried different CSS but i cant make it work. I want to use the form just for info, so i dont need the button.
    Thank you

  9. Hi, thank you for the article. I would like to change the position of the submit button to the right side. The standard is on the left side. I can’t find any CSS description on how to do this. Could you please help out?
    Thank you.

    Efkan

    1. Hi Efkan,

      You can reposition the submit button to the right using the following CSS code:

      div.wpforms-container-full .wpforms-form .wpforms-submit-container {
      text-align: right !important;
      }

      In case it helps, here’s a great tutorial from WPBeginner on how to add custom CSS like this to your site. 🙂

  10. Hello!

    Thanks for all of this helpful information. I still have a question, though.

    I have successfully changed the background color for the submit button, and I have also successfully added a separate color on hover–and on focus, so that the color of the button changes when users tab to it.

    What I can’t seem to puzzle out is how to keep the hover color in place once the button has been clicked and is actively submitting. Once a user moves the cursor away from the button, the hover color reverts back to the original color, which can make it look like the button hasn’t been clicked at all (even though the text does read “submitting . . .” ).

    Is this an :active selector issue that I’m missing, or is there something else that I’m missing?

    I appreciate any guidance that you can offer.

  11. i tried that code to change the validation message background color and it hasn’t changed anything. It keeps presenting in the light green color it originally came with.
    Any suggestions?

    1. Hi Janine,

      If you have a caching plugin installed on your site (or if your host does caching) you’ll want to clear/flush that out first and try the code again. If the problem still continues and you have a paid license, please contact our support team and they’ll take a look at it. 🙂

  12. Hi Daisy,

    I’m just following up on my inquiry about 5 posts above. As instructed, I sent my inquiry to the support team about three weeks ago, and I haven’t heard anything.

    I did find a kind of workaround, but I’m still interested in knowing if it is possible to get the color of the submit button to change–and to stay changed–when forms are being submitted.

    Thanks for the help.

    1. Hi Joe,

      I’m sorry for the confusion – it seems like one of our support team members did respond to your email on March 25th but we’re not sure if you ever received it (it may have been filtered out as spam/junk so it’d be worth checking in there just in case).

      To summarize their response, however, unfortunately we don’t have a way of accomplishing what you’re trying to do. The issue is that the “Submitting” text is displayed by JavaScript, and does not change the CSS of the button — and so there isn’t something good to, in a sense, “grab onto” in terms of custom CSS. It might be possible to achieve by using some creative JavaScript/jQuery but we can’t provide any support for this degree of customization. I apologize for the inconvenience!

  13. Hello, How can I make Submit button to be inline with Name and Email text boxes.
    I made Name and Email test boxes inline using layout option.

  14. Hello! How do I change my submit button to be only a single line of text?
    Now the button is huge because of two rows of text…

    The contact form is made with inline as a one row form.

    1. Hi Thomas!
      Sure, you can try customizing the submit button with the custom CSS. We have a great tutorial on how to do this here.
      I hope this helps!
      Have a good one 🙂

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.