How to Customize Button Styles With CSS (With Examples)

Editorial Note: We may earn a commission when you visit links on our website.

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

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

In this article, we’ll show you how to customize button styles with CSS.

How Do You Style Buttons Differently in WPForms?

You can style buttons differently using WPForms’ form styling controls or by using CSS code. If you choose to use code, you can style each form separately.

We’ll explain how this works below.

How to Customize Button Styles With CSS

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.

Create Your WordPress Form Now

Before going ahead with adding CSS, consider whether the built-in styling controls in WPForms will help you to achieve the button style you want in an easier way.

You can see more about WPForms’ no-code form styling in this post on how to style contact forms in WordPress.

Default button style

If you’d rather take control of your button styles with CSS, you can customize the buttons of your forms in two ways:

  1. Customize button styles for all of your forms
  2. 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?

As we mentioned up top, WPForms has built-in styling controls for this purpose.

Styling buttons in WPForms

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

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.

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

ghost button

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.

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:

gradient button

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

rounded corner button

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.

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:

multiline button

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

Create Your WordPress Form Now

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.

We’ve also got some plugin roundups to help you choose the best plugins as your site grows:

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

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 🙂

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

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

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

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

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

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

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

  10. i’m keen to change the background color of the validation messages. Any recommendations?

  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 🙂

  15. Hello!
    What happens when we want the Wpforms Submit button to look the same as the rest of the theme buttons?
    I thought it would be enough to paste the CSS class of the primary theme button into the “CSS class of the submit button” field of the form builder.
    However, the button does not change appearance at all … Should we enter the class name in any special way?

    1. Hi Juanma.
      I apologize for any confusion!
      You can achive this with custom CSS. Please check this article on our site for more details.
      I hope this helps!
      Have a good one 🙂

  16. Hi support team!

    What CSS code should I use to change location of the button? For example, I would like to move the Submit button to the center of the form and lower.

    Thanks!

    1. Hi Jacqueline.
      Please note, that custom code is out of our support scope, we can’t help with the custom code customizations or implementation.
      However, I’ve checked in our system and I see that we have a suggestion to achive what you are looking for:
      div.wpforms-container-full .wpforms-form .wpforms-submit-container {
      text-align: center !important;
      }

      I hope this helps.
      Have a good one 🙂

  17. Hello! How do a change the button background color for the color the button is while it is “sending” after submit is pushed? Thank you!! (^_^)y

    1. Hi Francesco- Great question!

      The easiest way to customize the submit button’s hover background button is by adding the CSS code as shown here in the tutorial

      I hope this helps!

      Thanks and have a good one 🙂

  18. Maybe simple, but I didn’t find it:
    Please, how to get the button “Submit” a function to redirect (link) to another page? So not send but redirect?

    1. Hey Roman – Good question!

      Yes, you can redirect to another page by navigating to Form Builder > Settings > Confirmation > select ‘Confirmation Type’ as ‘Go to URL (Redirect)’ > and add the confirmation redirect URL. Here is a great guide on this.

      I hope this helps! Thanks, and have a good one 🙂

  19. Please help. I have tried to change the submit button to have a radius of 5px. I don’t know if I’m inputting the CSS code wrong?
    Thank you!

    1. Hey Jillian – We’d be happy to help 🙂

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

      If you have a WPForms license, you have access to our email support, so please submit a support ticket. That way we can discuss more details and investigate this further.

      Thanks 🙂

  20. Hi,

    Here is my website link where I put the WPForms.

    [URL Removed]

    I want the “Next, Previous, Submit etc” Buttons to be the same style of my themes button.

    Please help

    1. Hey Abubakar- Thanks for reaching out 🙂

      You can customize the Submit Buttons on your site by referring to this article. Also, we do have a great guide on customizing individual form fields.

      If you need any help, please do not hesitate to contact our support team.

      Thanks, and have a good one 🙂

  21. Hi! Great article!

    How do I add an icon on hover to the submit button? I’ve literally looked everywhere for this code and can’t find it.

    Thanks!

    1. Hey JP– Thanks for reaching out!

      To do what you mentioned you can consider using FontAwesome, and one way to add Font Awesome to your site is to use the ‘Better Font Awesome’ plugin

      When you’ve added Font Awesome to your site, we’ll need some custom CSS to add an icon to the Submit button, which I’ve included here

      This snippet with the code ‘\f1d8’ will display a paper plan icon, and you can replace it with your preferred icon’s code by going to Font Awesome’s gallery

      Hope this helps! 🙂

  22. Hi. Using Lite version. When I hover, the button moves slightly and appears to have a white outline. The CSS I’m using:

    .wpforms-form button[type=submit] {
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #024488 !important;
    color: #fff !important;
    }
    .wpforms-form button[type=submit]:hover {
    background-color: #d62598 !important;
    }

    How do I remove the hover focus or button moving? Thanks

  23. Hi there,

    I am looking for help on how to center align my submit button on my forms. I haven’t seen any way to do that, and the normal center align CSS isn’t working.

    How do I solve this? Thanks!

  24. Hello

    I have an inline-fields form, but it doesn’t accept my padding settings on the submit button, the submit text is misaligned.

    I’ve already tried the options above:
    padding-top, padding-bottom, and just padding – but none worked…

    Can you help me?

    Thanks in advance!

  25. Hey
    Absolut newbie to CSS, but I do know how to copy and paste 🙂 so..

    How can I add a PayPal Buy Now, check out submit button?

    Thxz for any help. Google is not being nice to me… 😉

    Darren

    1. Hi Robert! I apologize for any confusion here. PayPal buttons are specifically provided by PayPal, with code that is provided by them as well. You can refer to their documentation here: https://www.paypal.com/buttons/

      In case it helps though, our plugin does have the ability to process payments with PayPal through one of our addons. It is available with our Pro level license, and you can find more details about it here: https://wpforms.com/addons/paypal-standard-addon/

      I hope this helps to clarify 🙂 If you have any further questions about this, please contact us if you have an active subscription. If you do not, don’t hesitate to drop us some questions in our support forums.

    1. Hey David. To achieve what you are looking for you would need to make use of animations and keyframes styles on your button. However, this is not something we are able to assist with from our end.

      For further customization, we suggest you codeable or WPBuff.

      Thanks and have a good one!

  26. Dear WP Form staff,

    I would like to know how I can embed a form into an Elementor button.
    I have prepared the WP form already and tried to use the ‘shortcode’ embed option on the WP form. However, when I copy and paste the shortcode to the button URL using Elementor, it redirects it to a blank page.

    Can you please help me with that without the need to upgrade to a paid plan (either on WP Form or on Elementor)?

    Thanks

  27. Buenas tardes, mi pregunta es la siguiente:
    Como puedo configurar los campos para que en vez de que me salga un rectángulo, en el que se escribe, salga una línea continua.
    Gracias

    1. Hey Marcos, In order to make sure we answer your question as thoroughly as possible and avoid any confusion.

      Would you mind reaching out to us with additional details so that we can help you further on this case?

      Thanks.

    1. Hey Allison, to achieve this, you will need to implement some custom code, and here is our developer’s guide on the same

      Since we what you are looking for would require some custom code we’re not able to provide support for the custom development that would be required. In case it helps, you could consider looking into a service such as Codeable or Upwork for potential developer options.

      Thanks!

  28. Hi, WP Forms Staff! I love WP Forms and I’m currently creating a smart form using conditional logic options. Love this, btw. To make my form perfect though, is there a way to apply the same conditional logic to the SUBMIT BUTTON? In other words, I want my SUBMIT BUTTON to hide until the appropriate boxes are checked (or required fields are completed). Thank you so much for any help!

    1. Hey Christine,

      I am sorry as we currently do not have an inbuilt feature to hide/ show the submit button conditionally. However, this can be achieved by using a little bit of the custom code as shown in this developer guide

      Hope this helps 🙂

    1. Hey Arnold – You can consider using following CSS to add icon to submit button:

      .wpforms-form button[type=submit]:after {
      content: "\f345"!important;
      vertical-align: middle!important;
      font-size: 1em!important;
      transition: all 0.5s ease!important;
      opacity: 1;
      }

  29. Hi!
    I noticed wpforms is replacing the ‘–theme-button-padding’ variable and setting its own:
    .wpforms-submit { –theme-button-padding: 5px 35px; }
    May I ask why you’re overriding the theme’s custom property setting here, instead of using the less specific padding property?

    Thanks 🙂

Add a Comment Cancel reply

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.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.